CSS color mystery in plain site (?)

[syakoban]

Hi Guys,

Still sorting out my JS conundrum and have another CSS issue making me crazy.

Using every tool I have, I cannot find the color of the default text (like “Your Name”) in the contact form fields. It’s not very visible and need to be changed, but I can’t find which CSS is affecting it.

Could it be affected by JS?

The page is here: http://ehydrant.com/KLTest/index.html

The CSS is here: http://ehydrant.com/KLTest/css/style.css

All help is appreciated!

[Pepster64]

You need to use vendor prefixes on the placeholder in CSS. A good link → https://css-tricks.com/snippets/css/style-placeholder-text/

[PaulOB]

Hi,

That’s the default placeholder text which is styled by the browser and is usually a lighter colour to show its the placeholder text and not the input text.

You can style the placeholder text like this:

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Note that it is a big accessibility issue to not have an identifying label element for the input as placeholder text should never be used on its own to identify an input. Once you have entered data then you have no way of knowing if the data is correct when you review the form as there are no labels. This is especially complicated when autofill has been used and has filled in all the wrong details.

Always use a label.

[syakoban]

Thanks Paul.

Totally agree on accessibility and will put labels on the fields.

If I understand correctly, I’m tearing my hair out to find something not there because the placeholder color selector is really a browser default?

[PaulOB]

@syakoban

If I understand correctly, I’m tearing my hair out to find something not there because the placeholder color selector is really a browser default?

Yes