htmlの選択オブジェクトからホバーカラーを削除するにはどうすればよいですか？

Question

私は単純に4色のhtml/cssを使って簡単なカラーピッカーを作ろうとしています。

私が迷惑を掛けているのは、ドロップダウンのオプションの上にマウスを置くと、ホバー状態のため青に変わりますが、CSSでこれを無効にすることはできません。

私はselect:hoverとoption:hoverのプロパティを試しましたが、何も動作していないようです。同じ効果を達成するライブラリを使用せずにこれに代わる方法がありますか？

function changeColor() { 
 
\t var c = this.options[this.selectedIndex].value; 
 
    document.getElementById("result").style.backgroundColor = c; 
 
} 
 

 
document.getElementById("colourPicker").addEventListener("change", changeColor);

body { 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
#colourPicker { 
 
    width: 50px; 
 
} 
 

 
#result { 
 
    padding: 20px 20px 20px 20px; 
 
    border: 1px solid black; 
 
} 
 

 
.white { 
 
    background-color: #ffffff; 
 
} 
 

 
.red { 
 
    background-color: #ff0000; 
 
} 
 

 
.amber { 
 
    background-color: #ffa500; 
 
} 
 

 
.green { 
 
    background-color: #00b300; 
 
}

<div id="test"> 
 
Pick a colour: 
 
<select id="colourPicker"> 
 
    <option value="#ffffff" class="white"></option> 
 
    <option value="#ff0000" class="red"></option> 
 
    <option value="#ffa500" class="amber"></option> 
 
    <option value="#00b300" class="green"></option> 
 
</select> 
 
</div> 
 
<br><br> 
 
<div id="result"> 
 
<center>Result Colour</center> 
 
</div>

Answer 1

あなたがすでに直面している問題に加えて、あなたの現在のデザインは、モバイルで見ると完全に崩れます。モバイルデバイスは一般に、使用可能なオプションとそれぞれのラジオボタンを特色とする特別なUIオーバーレイを表示します。この場合、空白のオプションは4つだけです。

ラジオボタンを代わりに使用することを検討してください。ラベルを使用してカラーオプションを表示することができます。たとえば...

.colourchoices>label { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    border-radius: 4px; 
 
    padding: 2px 4px 2px 2px; 
 
}

<p class="colourchoices"> 
 
    <label style="background-color:#ffffff"> 
 
    <input type="radio" value="#ffffff" name="col" />White 
 
    </label> 
 
    <label style="background-color:#ff0000;color:white"> 
 
    <input type="radio" value="#ff0000" name="col" /> Red 
 
    </label> 
 
    <label style="background-color:#ffa500;color:white"> 
 
    <input type="radio" value="#ffa500" name="col" /> Amber 
 
    </label> 
 
    <label style="background-color:#00b300;color:white"> 
 
    <input type="radio" value="#00b300" name="col" /> Green 
 
    </label> 
 
</p>

これはあなたが要素をスタイリングに関して好きなだけ自由を与える方法に注目してください。

Answer 2

は、現在、ドロップダウンのオプションのスタイルを設定することはできません。あなたが持っている最良の選択肢は、順序付けられていないリストといくつかのCSS魔法を使うことです。チェックthis out