如何在不使用 span 标签的情况下将颜色赋予 *

Posted 2023-03-05

【中文标题】如何在不使用 span 标签的情况下将颜色赋予 *

【英文标题】：How to give the color to * without using span Tag

【发布时间】：2017-03-21 16:27:07

【问题描述】：

我正在使用 WordPress 并使用该插件的 event Plus 插件

正在使用表单。有些字段是预定义的，有些字段我们可以使用

创建

自定义功能。我的要求是我想显示必填字段*颜色

red.And 我不能使用 span 标签，因为它会造成表单问题

验证消息。我只想 * 应该以红色显示。我该如何使用

CSS。

表格如下：-

<form name="regform" class="evrplus_regform" method="post" action="https://manresa-sj.com/evrplus_registration/?" onsubmit="mySubmit.disabled = true;
       return validateForm(this)">
  <ul>
    <li>
      <label for="fname">First Name*</label>
      <span class="fieldbox"><input type="text" id="fname" name="fname" value=""></span>
    </li>
    <li>
      <label for="lname">Last Name*</label>
      <span class="fieldbox"><input type="text" id="lname" name="lname" value=""></span>
    </li>
    <li>
      <label for="email">Email Address*</label>
      <span class="fieldbox"><input type="text" id="email" name="email" value=""></span>
    </li>
    <li title="">
      <label for="question-4138">Name and Date of Retreat*</label>
      <span class="fieldbox"><input type="text" class="r" id="TEXT_4138" name="TEXT_4138" size="40" title="Name and Date of Retreat*" value="" disabled="disabled"></span>
    </li>
    <li title="">
      <label for="question-4139">Is this is your first retreat there*</label>
      <span class="radio"><input id="SINGLE_4139_0" class="r" name="SINGLE_4139" title="Is t" type="radio" value="Yes"> Yes</span><span class="radio"><input id="SINGLE_4139_1" class="r" name="SINGLE_4139" title="Is t" type="radio" value="No"> No</span> 
    </li>
    <li title="">
      <label for="question-4140">Title: Mr, Mrs, Ms….</label>
      <span class="fieldbox"><input type="text" id="TEXT_4140" name="TEXT_4140" size="40" title="Title: Mr, Mrs, Ms...." value=""></span>
    </li>
    <li title="">
      <label for="question-4141">Nickname</label>
      <span class="fieldbox"><input type="text" id="TEXT_4141" name="TEXT_4141" size="40" title="Nickname" value=""></span>
    </li>
    <li title="">
      <label for="question-4142">Suffix: MD, Sr….</label>
      <span class="fieldbox"><input type="text" id="TEXT_4142" name="TEXT_4142" size="40" title="Suffix: MD, Sr...." value=""></span>
    </li>
    <li title="">
      <label for="question-4143">Birthday</label>
      <span class="fieldbox"><input type="text" id="TEXT_4143" name="TEXT_4143" size="40" title="Birthday" value=""></span>
    </li>
    <li title="">
      <label for="question-4144">Profession</label>
      <span class="fieldbox"><input type="text" id="TEXT_4144" name="TEXT_4144" size="40" title="Profession" value=""></span>
    </li>
    <li title="">
      <label for="question-4145">Spouse’s Name</label>
      <span class="fieldbox"><input type="text" id="TEXT_4145" name="TEXT_4145" size="40" title="Spouse's Name" value=""></span>
    </li>
    <li title="">
      <label for="question-4146">Parish Name</label>
      <span class="fieldbox"><input type="text" id="TEXT_4146" name="TEXT_4146" size="40" title="Parish Name" value=""></span>
    </li>
    <li title="">
      <label for="question-4147">Home Phone*</label>
      <span class="fieldbox"><input type="text" class="r" id="TEXT_4147" name="TEXT_4147" size="40" title="Home Phone*" value=""></span>
    </li>
    <li title="">
      <label for="question-4148">Mobile Phone</label>
      <span class="fieldbox"><input type="text" id="TEXT_4148" name="TEXT_4148" size="40" title="Mobile Phone" value=""></span>
    </li>
    <li title="">
      <label for="question-4149">Business Phone</label>
      <span class="fieldbox"><input type="text" id="TEXT_4149" name="TEXT_4149" size="40" title="Business Phone" value=""></span>
    </li>
    <li title="">
      <label for="question-4150">Contact in case of Emergency</label>
      <span class="fieldbox"><input type="text" id="TEXT_4150" name="TEXT_4150" size="40" title="Contact in case of Emergency" value=""></span>
    </li>
    <li title="">
      <label for="question-4151">Relationship to you</label>
      <span class="fieldbox"><input type="text" id="TEXT_4151" name="TEXT_4151" size="40" title="Relationship to you" value=""></span>
    </li>
    <li title="">
      <label for="question-4152">Address*</label>
      <span class="fieldbox"><input type="text" class="r" id="TEXT_4152" name="TEXT_4152" size="40" title="Address*" value=""></span>
    </li>
    <li title="">
      <label for="question-4153">City*</label>
      <span class="fieldbox"><input type="text" class="r" id="TEXT_4153" name="TEXT_4153" size="40" title="City*" value=""></span>
    </li>
  </ul>
</form>

【问题讨论】：

我发现了一个重复的问题，有更好的 hack 答案。 ***.com/questions/15441742/change-last-letter-color

使用 css 是做不到的，因为没有 :last-letter 伪选择器（有 :first-letter 但这对你没用）。此外，rtl hack 仅在您将标签向后写时才有效，这是非常糟糕的 hack（如果您可以更改字母的方向，您也可以在 * 周围添加 <span>）

【参考方案1】：

你可以使用jQuery:

  $(document).ready(function()
    $("label").each(function()
    var labelValue = $(this).text();
    if(labelValue.includes("*"))
        $(this).addClass("required");
      $(this).text(labelValue.replace("*",""));
    
  );
);

和css:

.evrplus_regform label.required:after
  content:"*";
  color:red;

自己试试here。

纯css方式：

只需将required 类添加到您所需的标签并使用上面的css。

<label for="fname" class="required">First Name</label>

【讨论】：

我只希望 * 应该是红色而不是完整标签

没有任何标签，没有办法只为*添加红色。

我已经更新了答案，现在符合您的要求

没有纯 CSS 方法可以做到这一点，上面的答案可能是最好的解决方案。

只需将所需的类添加到您所需的标签并使用上面的 css。

【参考方案2】：

你可以试试这个，

    <style>
    label[for="fname"]:after, label[for="lname"]:after, label[for="email"]:after   
content: "* "; color:red;
 
    </style>

【讨论】：

为什么这不是公认的答案，它是纯 CSS！

【参考方案3】：

  <label for="fname">First Name<font color=red>*</font></label>

试试这个