1

I have options tags inside a select tag, each one has a title attribute, I want to change the style of those titles, I tried this but it didn't work :

<select>
<option id="op1" title= 'title1'>option 1</option>
<option title= 'title2'>option 2 </option>
</select>

First with this css:

option[title]:hover:after{
 content: attr(title);
 background: red; 
}

Then with this one:

#op1[title]:hover:after{
 content: attr(title);
 background: red; 
}

Neither of those two methods worked, yet I tried this with the anchor tag and it did work. Any suggestions please.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
user3510821
  • 113
  • 1
  • 5
  • 15
  • What browser are you testing with? You're pretty limited in what you're able to do with option elements. Chrome doesn't support :hover on them at all, and from some quick testing, it doesn't look like Chrome or IE support :after on them. I tested your first CSS in Firefox, and it does work there, though. – Elezar Jan 20 '16 at 03:13
  • Actually I was testing with Chrome. With Firefox it works but I didn't get the expected behavior: the styled title is displayed beside the option and not in the box below. – user3510821 Jan 20 '16 at 13:56
  • Well, you're adding the title with the `:after` pseudo-class, so it's going to appear immediately after the option. If you want it to appear somewhere else, you'll need to use positioning to get it there. – Elezar Jan 20 '16 at 20:05

2 Answers2

-1

You have 

title= 'title1'

closing the gap might help:

title='title1'
Carol McKay
  • 2,438
  • 1
  • 15
  • 15
-1

html

<select>
<option id="op1" title= 'title1'>option 1</option>
<option title= 'title2'>option 2 </option>
</select>

<p><abbr title="abbr title">abbrt</abbr></p>

css

option[title]:hover:after{
 content: attr(title);
 background: cream; 
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  display:block;
  position:absolute;
  top:0;
  right:-100%;
}

http://codepen.io/anon/pen/QyagdE

Carol McKay
  • 2,438
  • 1
  • 15
  • 15