セレクト入力のドロップダウンをスタイリングする

Question

私はselectの要素をスタイルするのは難しいことを知っています。多くの質問がありました。しかし、大部分は、select要素自体、またはその中のoption要素のいずれかのスタイルに適用されているようです。私のことはどちらでもない。私は二つのことやりたい：

1 - DROPDOWN（ないselect、ないoptionsに国境半径を追加 - option要素を含むが、あなたはselectをクリックしたときに表示されるドロップダウンボックス

。

2 - Chromeがこのドロップダウンボックスに不必要に表示する垂直スクロールバーを削除します。

CSSを使用してB）ネイティブのselect要素を使用できますか？

Answer 1

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>

Answer 2

あなたの必要性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; 
}