下の図に示すように、Select タグを設計しようとしています。
どういうわけか、selectタグをdivでラップすることで設計できました。しかし問題は、設計された矢印をクリックすると、選択タグが機能しないか、すべてのリストが表示されないことです。
私が期待しているのは、矢印をクリックすると、選択タグにすべてのオプションが表示されるはずです。親ラッパー要素の疑似要素を使用して矢印セクションが生成されるため、これは発生しません。機能していないように見えるため、疑似要素セレクター select タグは使用していません。
親ラッパーを使用してこの問題を解決できbackground-image
ますが、可能な限りhtmlを変更する完全な権利があるため、画像やjavascriptを使用しない、つまりCSSのみを使用するより良いアプローチを探しています。
これがフィドルです。
<div class="select-wrapper">
<select>
<option>EEE</option>
<option>ECE</option>
<option>EIE</option>
</select>
</div>
.select-wrapper {
display:inline-block;
border:1px solid #bbbbbb;
position:relative;
width:120px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin-top: 10px;
}
.select-wrapper:before{
content: "";
position:absolute;
right: 5px;
top:8px;
border-width: 5px 5px 5px 5px;
border-style: solid;
border-color: #666666 transparent transparent transparent ;
z-index:3;
}
.select-wrapper:after {
content:"";
display:block;
position:absolute;
top:0px;
bottom:0px;
width:20px;
right:0px;
border-left:1px solid #bababa;
background-color:#ededed;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
}
select {
width:100%;
background-color:#ededed;
border:none;
outline:none;
padding:0px;
margin:0px;
position:relative;
}