0

I'm trying to style the asterisk ("*") inside the span element of a required field based on the "input:valid" property.

<apex:input value="{!firstName}" id="firstnameId" required="true" />
     <label class="lbStyle" for="FirstName"> First Name

      <span class="ddff" style="color:red;">*</span>

     </label>

I want to change the color of the "*" From Red to Green, If the input is valid.

How can I achive it using css?

I tried this : 

input:valid .ddff {
      color: palegreen;
 }

But it not working.

I know I can do it in JS as well, but I have a lot of fields to change so I would like a css way if it is possible.

Thanks!

Improve this question

3 Answers 3

Reset to default
1

You can use below css and html for your problem. It will work.

 <div class="input-wrapper">
    <apex:input id="firstnameId" required="true" />
     <label class="label" for="FirstName"> First Name</label>
    <span class="placeholder">*</span>
 </div>

 <style>
.input-wrapper input:invalid + .label + .placeholder {
  color:red;
}
  .input-wrapper input:valid + .label + .placeholder {
  color:palegreen;
}

 </style>
Improve this answer
2
  • Hi, I want to change only the asterisk (*) inside the span - not the input. Commented May 14, 2019 at 6:39
  • Hi Thanks, I didn't test it, but it almost the same as the answer that I posted for this question - It's more readable I guess. I'll give you an upvote for it thank you for your help. Commented May 14, 2019 at 10:38
0

Create Custom label put the custom label value * and use it this custom label on vfpage.

for eg: 

 <span style="font-color:red;display:inline-block;"> {!$Label.**your_custom_label_name**} </span>
Improve this answer
0

Eventually what I did is : 

input:valid + label .ddff {
   color: palegreen;
}

.ddff{
   color: red;
}

And I removed the inline CSS in my span : 

<apex:input value="{!firstName}" id="firstnameId" required="true" />
     <label class="lbStyle" for="FirstName"> First Name

      <span class="ddff">*</span>

     </label>
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.