更改選項標籤內部Title屬性的樣式

我在選擇標籤內部有選項標籤，每個標籤屬性都有一個標題屬性，我想更改這些標題的樣式，我試過但它沒有工作：更改選項標籤內部Title屬性的樣式

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

首先與該CSS：

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

與這一個

然後：

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

無論那些總重量的o方法工作，但我試圖與錨標記，它確實工作。任何建議請。

來源

2016-01-19 user3510821

您使用哪種瀏覽器進行測試？您在選擇元素方面的能力相當有限。 Chrome不支持：根本不支持：懸停在它們上面，並且從一些快速測試中，它看起來不像Chrome或IE支持：在他們之後。我在Firefox中測試了你的第一個CSS，但它在那裏工作。 – Elezar

其實我正在用Chrome進行測試。使用Firefox它可以工作，但我沒有得到預期的行爲：樣式標題顯示在選項旁邊，而不是在下面的框中。 – user3510821

好吧，你正在用'：after'僞類添加標題，所以它會立即出現在選項後面。如果你想讓它出現在別的地方，你需要使用定位才能找到它。 – Elezar

你有

title= 'title1'

縮小差距可能會有所幫助：

title='title1'

來源

2016-01-20 02:28:03

那裏的空白是微不足道的。刪除它不會有所作爲。 – BoltClock

我確認，沒有幫助 – user3510821

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

來源

2016-01-21 02:57:00

更改選項標籤內部Title屬性的樣式

回答

相關問題