CSS/HTML - 正確設置選擇框的樣式

我很新，正在做自己的CSS更改，我有點卡在select元素上。到目前爲止，我有它，我想用下面的CSS：CSS/HTML - 正確設置選擇框的樣式

select { 
    float: left; 
    border: 0 none; 
    height: 46px; 
    width: 240px; 
    background-color: #191919; 
    font-size: 14px; 
    color: white; 
}

唯一的問題，就是現在我看到某種梯度，我似乎無法找到在CSS任何事情來得到擺脫它。

下面是我所看到的

http://i39.tinypic.com/20797ki.png

來源

2011-11-20 Blap Blap

'select'元素只接受非常有限的CSS，因爲它們是由操作系統呈現的，而不是瀏覽器本身。你可以通過使用樣式化的'ul'（或'ol'）和一些JavaScript來模擬'select';但「選擇」元素本身的風格幾乎不可能實現可靠。閱讀這個問題的一些關於JavaScript方法的指針（儘管使用jQuery而不是普通的JS）：http://stackoverflow.com/questions/4599975/html-select-box-options-on-hover –

哇...這就是真的可怕的，好的謝謝你的幫助。 –

你必須使用JavaScript類型選擇，複選框，單選按鈕。

有一個庫的fancyform（需要jQuery），你可以使用它，它可以轉換上面的項目，幾乎完全支持textarea有一個自定義滾動條。 http://lutrasoft.nl/jQuery/fancyform/ 在源代碼中您可以獲得最新版本。這是很容易使用：

HTML：

<select class="select"> 
    <option>Option 1</option> 
    <option>Option 2</option> 
</select>

的Javascript：

$(function(){ 
    $(".select").transformSelect(); 
});

CSS（你需要編輯）

.transformSelect li 
{ 

    position : relative; 

} 

    .transformSelect li span 
    { 
     cursor : pointer; 
     padding  : 3px; 
     border  : 1px solid #cccccc; 
     width  : 154px;    
     line-height : 15px; 
     height  : 15px; 
     display  : block; 
    } 

     .transformSelect li span:hover 
     { 
      background : #eeeeee; 
     } 

    .transformSelect li ul 
    { 
     position : absolute; 
     left  : 0;  
     top   : 22px; 
     border  : 1px solid #cccccc; 
     width  : 160px; 
     background : #ffffff; 
    } 
     .transformSelect li ul li span 
     { 
      border : 0;  
      cursor : pointer; 
     } 
      .transformSelect li ul li span:hover 
      { 
       background : #cccccc; 
      }

該腳本將產生以下：

<ul> 
    <li><span>Option 1</span> 
     <ul> 
      <li><span>Option 1</span></li> 
      <li><span>Option 2</span></li> 
     </ul> 
    </li> 
</ul>

您的源代碼中不一定有UL LI，它將由腳本生成（也支持OPTGROUP）。它有一些選項來顯示第一項或隱藏它，有一個輸入與下拉菜單也有自定義輸入等。

有關更多設置，您需要檢查腳本的來源。

來源

2011-11-20 12:08:44 Niels

項目也可在github https://github.com/Lutrasoft/Fancyform – Niels

可以使用

-webkit-appearance: none;

，以擺脫梯度。

來源

2012-10-11 07:00:42 Aarvos

CSS/HTML - 正確設置選擇框的樣式

回答

相關問題