selectでドロップダウンオプションのアウトラインカラーを変更するにはどうすればよいですか？

Question

selectのドロップダウンオプションのアウトラインカラーを変更するにはどうすればよいですか？

これは私が現在持っているものです。

select:focus{ 
 
    outline-color: #986fa5; 
 
}

<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select>

私はoption:focusを変更しようとしているが、まだ、私は選択をクリックし、ドロップダウンオプションが現れたときに、オプションメニューは、ウェブを持っています - リング色の輪郭。どのように輪郭の色を変更するのですか？

Answer 1

あなたが高度にカスタマイズされた選択をしたいのなら、あなた自身が最良の選択です。次に例を示します。

$("document").ready(function() { 
 

 
    $(".option").click(function() { 
 
    $(".option").slideDown(); 
 
    }); 
 

 
    $(".option:not(.selected)").click(function() { 
 
    $(".option:not(.selected)").slideUp(); 
 
    $(".option.selected").text($(this).text()) 
 
    $("#selectVal").val($(this).data("value")) 
 
    }); 
 

 
});

li { 
 
    list-style: none 
 
} 
 

 
.option { 
 
    display: none 
 
} 
 

 
.option:first-child { 
 
    display: block 
 
} 
 

 
.option:not(.selected):hover { 
 
    background: red 
 
} 
 

 
#select { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    cursor: pointer 
 
} 
 

 
#select img{width:30px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="select"> 
 
    <li class="option selected">--</li> 
 
    <li class="option" data-value="0"><img src="http://www.flags.net/images/largeflags/SPAN0002.GIF" alt=""/>Spain</li> 
 
    <li class="option" data-value="1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/255px-Flag_of_Portugal.svg.png" alt=""/>Portugal</li> 
 
</ul> 
 
<input id="selectVal" type="hidden" value="" />

それを理解することは非常に簡単だし、あなたが共通の選択からそれを得るだろうとあなたが値を得ることができます。主な違いは、この方法では、css3をサポートするすべてのブラウザで同じ外観になることが保証されます。

Answer 2

selectタグは、あなたがあなたのスタイル選択リストに何ができるかではかなり限られている

#d option:last-child { 
 
    border-bottom: solid red 2px; 
 
    overflow: visible; 
 
} 
 

 
#d option:first-child { 
 
    border-top: solid red 2px; 
 
} 
 

 
#d option { 
 
    border-left: solid red 2px; 
 
    border-right: solid red 2px; 
 
}

<div> 
 
    <select id="d"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
</select> 
 
</div>