2016-11-08 4 views
3

WordPressで作業していて、イベントプラグインプラグインを使用しています。スパンタグを使用しないで*色を与える方法

がこのフォームを使用しています。いくつかのフィールドには、あらかじめ定義されており、私はspanタグを使用することはできません必須フィールド*色

red.Andを表示したいです、それは問題を作成しているため、いくつかのフィールドには、我々は

カスタマイズfunctionality.My要件を使用して作成することができます形式:

検証メッセージ。私はちょうど赤い色で表示する必要があります。どのようにすれば

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>

+2

は、私はより良いハックの答えと重複する質問を見つけました。 http://stackoverflow.com/questions/15441742/change-last-letter-color –

+0

cssを使用すると、 ':last-letter'疑似セレクタがありません(':first-letter'がありますがそれはあなたの役に立たない)。また、rtlのハックは、本当に悪いハックであるラベルを後方に書いた場合にのみ有効です(文字の方向を変えることができるなら、*の周りに ' 'を追加することができます) –

答えて

3

あなたは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> 
+0

私はちょうど*赤でなければなりませんフルラベル –

+0

タグを付けずに '*'だけに赤色を追加する方法はありません。 –

+0

私は自分の答えを更新しました。これはあなたの要求に合っています –

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

あなたはこれを試すことができます。この

0

を試してみて、

<style> 
    label[for="fname"]:after, label[for="lname"]:after, label[for="email"]:after { 
content: "* "; color:red; 
} 
    </style> 
関連する問題