Using placeholders with AJAX. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field. You …

The next thing I tried was using a disabled but default selected option element and setting the font color to the same grey as the input placeholder element.

Recently I was confronted with the task of creating a select field with a placeholder value so that the select field blends in nicely with other form fields on the page.The problem of custom styled select elements is a hard one. When you apply a CSS font styles to the input field, the placeholder text will also inherit that properties.

Assuming that select fields are either always required or we are able to provide a default value for optional select fields, is an assumption which might not hold true all of the time.Although usually one of my pet peeves is to build functionality which requires (or seems to require) JavaScript, with pure CSS, in this case just some sprinkles of JavaScript could solve this problem once and for all.By setting the initial placeholder grey color of the element with JavaScript, we are save in case the user has disabled JavaScript, JavaScript didn’t load, the Browser couldn’t execute our JavaScript code or any other reason why JavaScript can be not available. The placeholder pseudo-class is going to match input elements which show a placeholder text. Styling native HTML form fields – especially select fields – with CSS has always been a little tricky.

Tip: The default color of the placeholder text is … The easiest way of making a placeholder for the ou