造型選擇輸入DROPDOWN

-1

我知道select元素很難風格，我知道很多問題已經被問及他們。但絕大多數似乎適用於select元素本身或其中option元素的樣式。我的兩個都不是。我希望做兩件事情：造型選擇輸入DROPDOWN

1 - 添加邊框半徑下拉（不是select，而不是options - 但是當你點擊select出現的下拉框，包含option元素

。

2 - 刪除Chrome在此下拉框中不必要地顯示的垂直滾動條。

可以這樣做A）完全可以，B）只有CSS和本地select元素？

2016-11-22 daninthemix

，我不認爲這是可能的它由您的瀏覽器設計和顯示。如果你不限制使用'select'標籤，你可以去找一個無序列表，你可以根據你的需要設計樣式。檢查了這個http://tympanus.net/Tutorials/CustomDropDownListStyling/ –

您可以使用ul li應用更多樣式。請檢查下面給出的代碼片段，並允許您執行更多樣式。

document.getElementById("dmenu").addEventListener("click",function(){ 
 
    
 
    if(document.getElementById("menu").style.display === "none"){ 
 
     document.getElementById("menu").style.display = "block"; 
 
    } 
 
    else{ 
 
     document.getElementById("menu").style.display = "none"; 
 
    } 
 
});

ul,li{ 
 
    list-style:none; 
 
    margin:0 ! important; 
 
    padding:0 ! imortant; 
 
    } 
 
#menu{ 
 
    border:1px solid #000; 
 
    border-radius:5px; 
 
    display:none; 
 
    } 
 
li{ 
 
    border:1px solid #000; 
 
    background-color:blue; 
 
    color:#fff; 
 
    
 
    } 
 
li:hover { 
 
    background-color:yellow; 
 
    color:red; 
 
    }

<select id="dmenu"> </select> 
 
<ul id="menu">Menu 
 
    <li>opt1</li> 
 
    <li>opt2</li> 
 
    </ul>

來源

2016-11-22 06:21:28

-1

這裏有可能會滿足您的需要

http://jsfiddle.net/ericrasch/rxqYp/

從CSS中添加一些片段幾個款式

.styled-select { 
    background: url(http://www.ericrasch.com/media/icon-selectbox.png) no-repeat 96% 0; 
    height: 29px; 
    overflow: hidden; 
    width: 240px; 
} 

.styled-select select { 
    background: transparent; 
    border: none; 
    font-size: 14px; 
    height: 29px; 
    padding: 5px; /* If you add too much padding here, the options won't show in IE */ 
    width: 268px; 
}

來源

2016-11-22 06:29:25

請仔細閱讀這個問題 - 我想樣式下拉框下拉選擇元素被點擊時，而不是選擇元素本身。你所有的例子在下拉框中都有相同的樣式。 – daninthemix

哦，好吧！可以附上你想要刪除的滾動條的屏幕截圖嗎？ –

造型選擇輸入DROPDOWN

回答

相關問題