霸氣宣言：select終極解決方案 |
作品類型：其他類型作品 |
作品描述：解決select不能被遮蓋和不能設(shè)置邊框背景補(bǔ)白等樣式的問(wèn)題 |
制作思路：使用htc文件動(dòng)態(tài)腳本修復(fù)，從而使使用者只需幾行CSS就能搞定問(wèn)題 |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>select</title>
<style type="text/css">
select {
border: 1px solid #ccc;
background: none;
padding: 4px 5px;
outline: none;
color: #333;
*behavior: url(select.htc);
}
select:focus {
border-color: #79c0f2;
}
</style>
</head>
<body>
<select>
<option>select</option>
</select>
</body>
</html>
這是我們測(cè)試用的頁(yè)面，請(qǐng)將它復(fù)制并保存為html文件。
然后下載附件，將select.htc放在與html相同的文件夾中
然后你就可以看到效果了。
對(duì)于不理解IE下Select的Bug的同學(xué)，可以刪除select.htc后使用IE6、7查看demo頁(yè)，以便查看區(qū)別
點(diǎn)擊此處查看demo
下載select.htc
2012-4-21 更新，支持自定義邊框顏色，解決服務(wù)器環(huán)境下無(wú)法更新select顯示內(nèi)容的bug
2012-4-22 更新，支持自定義小三角顏色(使用scrollbar-arrow-color定義)，優(yōu)化更新select顯示內(nèi)容時(shí)的效率，增加focus狀態(tài)下樣式，美化了背景色不為白色時(shí)IE7下的效果，解決了IE6中select在focus時(shí)即使沒(méi)有hover也不能滾頓頁(yè)面的bug。
2012-4-25 更新，支持透明背景或任意其他顏色背景的select。
該文章在 2012/4/30 1:36:57 編輯過(guò)
400 186 1886
