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?

You can't change the style of the `title` attribute as this is handled by the OS. What you have selects an `input` element that *has* a `title` attribute — Explosion Pills, Jul 04 '13 at 14:12
possible duplicate of [Is it possible to style a title? (and with CSS or js?)](http://stackoverflow.com/questions/4383148/is-it-possible-to-style-a-title-and-with-css-or-js) — cimmanon, Jul 04 '13 at 14:15
You can use JavaScript to change the `title` property into another thing and finally, you can customize this other thing. Take a look [here](http://www.designchemical.com/blog/index.php/jquery/jquery-tooltips-create-your-own-tooltip-plugin/) — Guilherme Oderdenge, Jul 04 '13 at 14:16
jQuery FTW on this one. There is no way to style a title attribute with standard CSS — mikedugan, Jul 04 '13 at 16:49
possible duplicate of [How to change the style of Title attribute inside the anchor tag?](http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag) — Ciro Santilli Путлер Капут 六四事, Aug 26 '14 at 15:10
I find [this](http://stackoverflow.com/a/36174799/5996253) Maybe this will help you — Yitzhak Weinberg, Mar 23 '16 at 09:57
I find [this](http://stackoverflow.com/a/36174799/5996253) Maybe this will help you — Yitzhak Weinberg, Mar 23 '16 at 09:58
Maybe [this](http://stackoverflow.com/a/36174799/5996253) will help you Try it — Yitzhak Weinberg, Mar 23 '16 at 10:00

score 4 · Accepted Answer · edited May 23 '17 at 10:27

4

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.

edited May 23 '17 at 10:27

Community

1
1

answered Jul 04 '13 at 17:21

Birdman

724
5
9

score 1 · Answer 2 · edited Dec 13 '20 at 14:37

1

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

<input type="text" title="here is a title" />

edited Dec 13 '20 at 14:37

mplungjan

155,085
27
166
222

answered Jan 04 '16 at 12:36

Akshay Misal

11
1

3

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. – Drenmi Jan 04 '16 at 17:26
I made a snippet. It does nothing special in Chrome on a mac in 2020 – mplungjan Dec 13 '20 at 14:37

score 1 · Answer 3 · answered Jan 04 '16 at 13:10

1

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;
}

answered Jan 04 '16 at 13:10

Leo

4,897
5
28
51

Styling HTML Title attribute using CSS

3 Answers3

Linked

Related