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
– Explosion Pills, Commented Jul 4, 2013 at 14:12
possible duplicate of Is it possible to style a title? (and with CSS or js?) — cimmanon
– cimmanon, Commented Jul 4, 2013 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 — Guilherme Oderdenge
– Guilherme Oderdenge, Commented Jul 4, 2013 at 14:16
jQuery FTW on this one. There is no way to style a title attribute with standard CSS — mikedugan
– mikedugan, Commented Jul 4, 2013 at 16:49
possible duplicate of How to change the style of Title attribute inside the anchor tag? — Ciro Santilli OurBigBook.com
– Ciro Santilli OurBigBook.com, Commented Aug 26, 2014 at 15:10

Community · Accepted Answer · 2017-05-23 10:27:24Z

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, 2017 at 10:27

CommunityBot

11 silver badge

answered Jul 4, 2013 at 17:21

Birdman

7245 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leo · Accepted Answer · 2016-01-04 13:10:04Z

0

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 4, 2016 at 13:10

Leo

5,2557 gold badges36 silver badges57 bronze badges

Comments

mplungjan · Accepted Answer · 2020-12-13 14:37:22Z

-1

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

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

edited Dec 13, 2020 at 14:37

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jan 4, 2016 at 12:36

Akshay Misal

71 bronze badge

2 Comments

Drenmi Over a year ago

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.

mplungjan Over a year ago

I made a snippet. It does nothing special in Chrome on a mac in 2020

Collectives™ on Stack Overflow

Styling HTML Title attribute using CSS

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related