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!

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 '19 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 '19 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.