選択時のCSS矢印がクリックされない

CSSの矢印（および線）を使用してドロップダウンを選択しています。矢印以外の場所をクリックすると、ドロップダウンが開きますが、矢印を直接クリックした場合は表示されません。私は矢印もクリック可能にしたい。ここで選択時のCSS矢印がクリックされない

は私のコードです：

.select { 
 
    position: relative; 
 
    z-index: 1; 
 
    background-color: #fff; 
 
    border-radius: 6px; 
 
} 
 

 
.select:before, 
 
.select:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    z-index: 1; 
 
} 
 

 
.select:before { 
 
    right: 37px; 
 
    content: ''; 
 
    display: block; 
 
    width: 1px; 
 
    height: 22px; 
 
    margin-top: -11px; 
 
    background-color: #636667; 
 
} 
 

 
.select:after { 
 
    right: 15px; 
 
    width: 0; 
 
    height: 0; 
 
    margin-top: -3px; 
 
    border: transparent 6px solid; 
 
    border-top: #636667 6px solid; 
 
}

<div class="select"> 
 
    <select class="form-control" id="state-dropdown"> 
 
\t <option>Select State</option> 
 
    </select> 
 
</div>

出典

2017-03-23 Linx

コードスニペットやjsfiddleにこれを変えることができますしてみてください？それは私のために適切に表示されない、それは何かが見当たりませんように思われる –

同じ、私はjsFiddleにあなたのコードのすべてをコピーし、質問に一致するものを取得していない。質問のフィドル：https://jsfiddle.net/3jkane8x/ –

はpointer-events: noneを追加してください。

出典

2017-03-23 21:00:01 Johannes

これは働いた！ありがとうございました – Linx

擬似要素は親ラッパーの一部ですが、たとえそうであっても、疑似要素が選択要素では動作しません全くとにかくので、それは働いていない理由があります。

これを回避する最も簡単な方法は、次のCSSを使用して、代わりにbackground属性を使用して外観を模倣することです。例えば

...

select { 
    background: url('image.png') 0px 0px no-repeat #fff; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
}

この質問はa working exampleを提供します。この回答にはthe fiddleのリンクも含まれています。 信用は、彼らの実際の例のためのその質問の回答者によるものです。

出典

2017-03-23 21:03:37

この有益な説明をありがとう！私は将来、このアプローチを使用しようとしますが、現在はポインタイベントを追加しています：どれも完璧に動作しませんでした – Linx

は、我々はそれを見ることができるので、この1つは

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
    .select { 
 
    position: relative; 
 
    z-index: 1; 
 
    background-color: #fff; 
 
    border-radius: 6px; 
 
} 
 

 
select { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance:   none; 
 
} 
 

 
select { 
 
\t border: 0 none; 
 
    height: 40px; 
 
    width: 100%; 
 
} 
 

 

 
.select:before, 
 
.select:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    z-index: 1; 
 
} 
 

 
.select:before { 
 
    right: 37px; 
 
    content: ''; 
 
    display: block; 
 
    width: 1px; 
 
    height: 22px; 
 
    margin-top: -11px; 
 
    background-color: #636667; 
 
} 
 

 
.select:after { 
 
    right: 15px; 
 
    width: 0; 
 
    height: 0; 
 
    margin-top: -3px; 
 
    border: transparent 6px solid; 
 
    border-top: #636667 6px solid; 
 
} 
 

 
.select { 
 
    border: 1px solid #666; 
 
    border-radius: 0; 
 
} 
 
    </style> 
 
</head> 
 
<body> 
 
    
 
<div class="select"> 
 
    <select class="form-control" id="state-dropdown"> 
 
\t <option>Select State</option> 
 
    </select> 
 
</div> 
 
</body> 
 
</html>

出典

2017-03-24 07:02:08

選択時のCSS矢印がクリックされない

答えて

関連する問題