如何自定義選擇標籤？

可能重複：
Is it possible to style a select box?如何自定義選擇標籤？

Select Tag

我想自定義選擇標記像上述這應該同樣看起來在所有瀏覽器的圖像。

CSS：

.select-bg 
{ 
    background:url(../images/select-bg.png) no-repeat top center; 
width:350px; 
height:47px; 
} 

.select-bg select 
{ 
background:#ff0000; 
} 

<div class="select-bg"> 

<select> 
<option>1</option> 
<option>1</option> 
<option>1</option> 
<option>1</option> 

</select> 

</div>

我想上面的圖像作爲選擇框的背景。

那麼，你能幫忙嗎？

來源

2011-07-13 samir chauhan

有沒有附加的圖像。另外，你自己嘗試過什麼？ –

圖像首先附在頂部 –

您需要什麼幫助？現在的問題質量很差 - 很難回答，因爲您沒有確定哪裏存在問題。 http://tinyurl.com/so-hints – Oded

你在這裏嘗試的是純粹的CSS和HTML不可能的。你需要的是jQuery。

這裏是一個偉大的list框插件列表。這one看起來像你想要的，是我個人的最愛。

來源

2011-07-13 13:35:46 Phil

另一個jQuery插件，你可能喜歡，有額外的優勢，因爲可與JQueryui的美樂家是fnagel's selectmenu。這是this original的演變。用一些與您的樣本完全相同的示例訪問該頁面（顏色除外，但是它是有代表性的）。這些組件的

A（未成年人）的不便是，他們的圓角是基於CSS3和不會呈現較舊的IE的

來源

2011-07-13 13:40:00 fvu

及其與純CSS和HTML不是不可能的，如果你使用一些新fetures的CSS3。

使用css3-gradients和border-radius，可以將select-element設置爲您的示例。

但是，這種方式在缺乏支持的瀏覽器中無法正常工作，但應該優雅地降級，即那些不支持此功能的瀏覽器將顯示標準的select-element。

實施例：

<style type="text/css"> 
     .wrapper select { 
      background-image: -webkit-gradient(
        linear, 
        left bottom, 
        left top, 
        color-stop(0.42, #EA0B0B), 
        color-stop(1, #F8ADAD)); 

      background-image: -moz-linear-gradient(
       center bottom, 
       #EA0B0B 42%, 
       #F8ADAD 100%); 
      border-radius:10px; 
      border:1px solid #000; 
      outline:0; 
      padding:5px; 
      color:#FFF; 
      font-weight:bold; 
     } 
     .wrapper select > option { background-color:#EA0B0B; } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <select class="test"> 
      <option>first</option> 
      <option>Second</option> 
      <option>Third</option> 
     </select> 
    </div>

來源

2011-07-13 14:01:16 Dean

如何自定義選擇標籤？

回答

相關問題