Styling HTML Title attribute using CSS

Question

I am trying to style the title attribute of a <input type="text"> using CSS. So this is what I did:

input[type="text"][title] {
    font-style: italic;
    color: gray;
}

It works okay, but when I enter data into the field, the data is gray and italic. I want the data (value) to be normal and black, and only the title to be italic and gray.

Any ideas?

Answer 1

You can do a custom solution using CSS3.

Take a look at How to change the style of Title attribute inside the anchor tag?. But might I suggest that you use a custom field like 'data-title' so the default browser behaviour doesn't interfere with your custom solution.

Answer 2

You can add the input's title in <h2></h2> and then change the property of the title from css like below:

h2 {
    font-style: italic;
    color: gray;
    font-size: 1em;
}