css のみを使用して少しカスタマイズした選択ボックスがありますが、要件に従って機能させることができません。
これは HTML ページの完全なコードです
<html>
<head>
<style>
select {
-webkit-appearance:none;
background-color:#58B14C;
background-position:initial initial;
background-repeat:initial initial;
border:0;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
color:#EEEEEE;
font-size:20px;
font-weight:bold;
margin-left:3px;
padding:2px 10px;
width:347px;
}
#mainselection { overflow:hidden; width:407px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background:url("img/arrow.gif") no-repeat scroll 362px 6px black; }
</style>
</head>
<body>
<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</body>
</html>
このコードを実行すると、出力はアップロードした画像のようになります。緑色の部分をクリックすると、ドロップダウンが正常に機能します。つまり、ドロップダウンの仕組みです。しかし、矢印をクリックするとドロップダウンが表示されます。背景のdivに適用された装飾が何であれ、選択のcssに挿入できる可能性はありますか? 画像と一緒？または、目的の機能を得るために記述できる JavaScript はありますか?
