從下拉菜單中刪除下拉菜單（選擇）？

我想知道是否有辦法從下拉菜單中刪除下拉菜單（<select>）按鈕（小箭頭）？我想創建一個項目列表，但沒有箭頭。從下拉菜單中刪除下拉菜單（選擇）？

史蒂夫

來源

2010-11-25 Steven

你不能做到這一點，尤其是跨瀏覽器。您可以完全用另一個控件替換<select>元素，但不能修改<select>呈現的方式......至少不符合您的要求。

Here是的few examples。

來源

2010-11-25 03:26:26

此外，檢查出這篇文章：http://tutorialzine.com/2010/11/better-select -jquery-css3/ – Metagrapher 2010-11-29 19:17:40

也許你正在尋找的東西更多的是這樣的：

<html> 
    <body> 

    <select size=1> 
    <option>Volvo</option> 
    <option>Saab</option> 
    <option>Mercedes</option> 
    <option>Audi</option> 
    </select> 

    </body> 
</html>

這將創建一個項目一個項目高大的選擇列表。在一些瀏覽器上，仍然會有一個空的滾動條，但它會擺脫下拉箭頭。只要設置了選擇標籤的大小，那麼箭頭就不會出現。

這裏對於選擇列表中更多的選擇：http://www.w3schools.com/tags/tag_select.asp

來源

2010-11-25 04:04:39 Metagrapher

-1

試試這個代碼：

select { 
    -webkit-appearance: none; 
    background-color: #FFF; 
    border: medium none; 
    color: #555555; 
    font-family: inherit; 
    outline: medium none; 
    overflow: hidden; 
    padding: 0; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 10em; 
    height: 1em; 
}

我伊茨工作。去嘗試一下。

來源

2013-02-02 11:13:27

這不起作用，如果您確實認爲它確實如此，請提供示例 – 2013-11-27 07:37:40

this answer從João Cunha工作奇蹟，我

純CSS！

我添加了一些代碼來擴展瀏覽器的支持，看到my answer in that question以下：

select { 
    /*for firefox*/ 
    -moz-appearance: none; 
    /*for chrome*/ 
    -webkit-appearance:none; 
    text-indent: 0.01px; 
    text-overflow: ''; 
} 
/*for IE10*/ 
select::-ms-expand { 
    display: none; 
}

來源

2013-12-09 11:40:38

從下拉菜單中刪除下拉菜單（選擇）？

回答

相關問題