선택 옵션에서 선택 색상을 변경하려고합니다. 나는 이것을하려고 노력했다 :선택 옵션에서 선택 색상을 변경하는 방법은 무엇입니까?
option::selection {background: #ccc;}
option::-moz-selection {background: #ccc;}
option::-webkit-selection {background: #ccc; color:#fff;}
그러나 그것은 작동하지 않는다. 이것은 간단한 텍스트에만 적용되며 옵션에는 적용되지 않습니다. 선택 색상을 변경할 수있는 방법이 있습니까? 선택한 옵션의 배경을 변경하지 않아도됩니다. 선택 색상을 변경해야합니다. 감사합니다. .
이 당신이 기대했던 것입니다이
http://jsfiddle.net/zNTqm/287/
JAVASCRIPT
$('.mySelect').change(function() {
$(this).find('option').css('background-color', 'transparent');
$(this).find('option:selected').css('background-color', '#cccccc');
}).trigger('change');
HTML을
<select class="mySelect">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
아니요,이 옵션은 옵션 자체의 배경에서만 작동합니다. 옵션 색상이 아니라 선택 색상을 직접 바꿔야합니다. – Peter
희망을 시도합니다.
function ChangedSelection()
{
var x = document.getElementById("mySelect").selectedIndex;
var color =document.getElementsByTagName("option")[x].value;
var y = document.getElementById("mySelect");
y.style.color=color;
}<select id="mySelect" onchange="ChangedSelection()" style="Color:red;">
<option value="red" selected="selected">Red</option>
<option value="blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
</select>select{
margin:40px;
background: yellow;
color:#000;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) {
background-color: #FFF;
}
HTML
<select>
<option val="">Select Option</option>
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
데모 JsFiddle : https://jsfiddle.net/hamzanisar/yfg8vdme/
[
select와 함께 작업하는 이유는 무엇입니까? 당신이 몇 가지 멋진 스타일을 원한다면 html리스트를 사용해야한다. – miksiii
가능한 [선택 상자 옵션 배경색을 변경하는 방법] 가능한 복제본?] (http://stackoverflow.com/questions/12836227/how-to-change-select-box-option-background-color) –