web-dev-qa-db-ja.com

CSS：select要素の下のコンテンツの後、クリックが機能しなくなります

ブラウザ固有の外観を取り除くために、select要素にこの（簡略化された）cssがあります

.select{
    display:inline-block;
    position:relative;
}
.select:after{
    position:absolute;
    bottom:0;right:0;
    content:'\2193'; 
}
select{
    appearance:none; (-moz and -webkit too)
    width:100%;
    height:100%;
}

（ http://jsfiddle.net/kwpke3xh/ で最もよく見られます）

body{
    background:#eef;
    font-family:sans-serif;
}
.select{
    display:inline-block;
    background-color:#fff;
    border-radius:.5em;
    border:.1rem solid #000;
    color:#013;
    width:8em;
    height:1.5em;
    vertical-align:middle;
    position:relative;
}
.select:after{
        position:absolute;
        bottom:.15em;top:.15em;right:.5rem;
        content:'\2193'; 
}
select{
    -webkit-appearance:none;
   -moz-appearance:none;
        appearance:none;
    font:inherit;
    border:none;
    background-color:transparent;
    color:inherit;
    width:100%;
    height:100%;
    padding:0 .5em;
}
<span class="select">
    <select>
        <option>A</option>
        <option>B</option>
    </select>
</span>

Firefoxがまだ矢印を表示していることを除けば、見栄えが良いです（説明されているように Firefox 30.0 --- moz-appearance：none not working ）

唯一の技術的な問題は、選択要素をクリックするとオプション要素が表示されることですが、矢印を直接クリックすると表示されません。

これを回避する方法はありますか？

cssselectabsolutepseudo-element
19
B7th

最も簡単なCSSソリューションは、疑似要素に pointer-events: none を追加することです。そうすることで、マウスイベントが削除されるため、要素をクリックすることができます。

更新された例

.select:after {
    position:absolute;
    bottom:.15em;
    top:.15em;
    right:.5rem;
    content:'\2193';
    pointer-events: none;
}

（ プロパティのブラウザサポート を考慮に入れてください。）

55
Josh Crozier