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!

3 Answers 3

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>
2
  • Hi, I want to change only the asterisk (*) inside the span - not the input.
    – Salvation
    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.
    – Salvation
    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>
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>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .