更改選擇輸入焦點的邊框顏色

Question

我似乎無法更改選擇輸入的焦點顏色，對於應該覆蓋的內容我很困惑。

 .form-control:focus { border-color: inherit; -webkit-box-shadow: none; box-shadow: none; } .forma #kome { border-color: #8e8e8e; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-align-last: center; cursor: pointer; color: #000000; -webkit-appearance: none; background: transparent url("http://icons.iconarchive.com/icons/mahm0udwally/all-flat/16/User-icon.png") no-repeat 15px center; } .forma select :focus { border-color: #2a6dc9 !important; } 

 <form class="center-block forma" action="" method="post"> <div class="form-group"> <select class="form-control" id="kome" name="kome"> <option value=" disabled selected ">Choose</option> <option value="smth"> smth </option> <option value="smth2"> smth2 </option> </select> </div> </form> 

Answer 1

select和:focus選擇器之間不應有空格。 空格表示父子關系，即“選擇的重點子項”。 而select:focus表示AND ：聚焦選擇。

.forma select:focus {
    border-color: #2a6dc9 !important;
}

Answer 2

這對我來說適用於chrome，方法是將邊框樣式更改為插圖，然后更改所需的輪廓顏色。 它不會更改選項上的焦點顏色，但是至少會在您選擇選項卡時更改焦點顏色。

select {
   border-style: inset;
   outline-color: orange;
}

Answer 3

樣式選擇重點對象：

更改

.forma select :focus{
    border-color: #2a6dc9 !important;
}

同

.forma option:hover{
    border: 1px solid red ;
}