我正在使用WordPress并使用Event Plus插件,该插件使用表单。有些字段是预定义的,有些字段可以使用自定义功能创建。我的要求是,我希望显示必填字段*的颜色为红色。而且我不能使用标签,因为它会导致表单验证消息出现问题。我只想让*以红色显示。我该如何使用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>
:last-letter
伪选择器(虽然有:first-letter
但对你没有用)。此外,RTL hack只适用于已经将标签反向编写的情况,这是一种非常糟糕的hack(如果您可以改变字母的方向,也可以在*周围添加一个<span>
)。 - dingo_d