선택 상자 옵션 배경색 변경

나는이 select상자를하고 난 때 옵션의 배경색을 변경하기 위해 노력하고있어 select상자를 클릭하고 쇼 모든 옵션되었습니다.

바이올린 참조

HTML :

<select>
    <option val="">Please choose</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>

CSS :

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

당신은 둘 필요가 background-color온 option태그가 아닌 select태그 ...

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

각 option태그 의 스타일을 지정 하려면 css attribute선택기를 사용하십시오 .

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}

<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

고려했는지 여부는 모르겠지만 응용 프로그램이 항목의 다양한 그룹을 채색하는 데 기반을두고 있다면 <optgroup>추가 참조를 위해 클래스와 결합 된 태그를 사용해야합니다 . 예를 들면 :

<select>
    <optgroup label="Numbers" class="green">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </optgroup>

    <optgroup label="Letters" class="blue">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </optgroup>
</select>

그런 다음 문서 헤드에 다음과 같이 CSS를 작성하십시오.

<style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>

예, 이것을 사용하여 oppisite 방식으로 설정할 수 있습니다.

option:not(:checked) { }

이것을 확인하십시오 demo jsFiddle

HTML

<select>
    <option val="">Please choose</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>

CSS

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#FFF;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) { 
    background-color: white; 
    color:#000;
}

일부 답변과 비슷하지만 실제로는 명시되지 않은 것은 실제 옵션 태그에 클래스를 추가하고 css 클래스를 사용하는 것입니다. 이것은 현재 IE에서 문제없이 저에게 효과적입니다 (위의 ss 참조).

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

CSS :

.greenColor{
    background-color: #33CC33;
}
.redColor{
    background-color: #E60000;
}

내 선택은 스타일에! important를 추가 할 때까지 배경색을 지정하지 않습니다.

    input, select, select option{background-color:#FFE !important}

에서 스타일을 지정하려면 http://getbootstrap.com/2.3.2/components.html#dropdowns 또는 https://silviomoreto.github.io/ 와 같은 Javascript / CSS 기반 드롭 다운으로 전환하는 것이 좋습니다. bootstrap-select / examples / . IE와 같은 브라우저 는 요소 내에서 옵션 스타일 지정을 허용하지 않기 때문 입니다. Chrome / OSX에도이 문제가 있습니다. 옵션 스타일을 지정할 수 없습니다.

그러나 이러한 접근 방식에는 경고가 첨부됩니다. 이러한 유형의 메뉴는 기본 요소가 사용되지 않기 때문에 모바일 플랫폼에서 매우 다르게 작동합니다. 데스크톱에서도 성가신 단점이있을 수 있습니다. 제 조언은 1) 직접 작성하지 말고 2) 정말 잘 테스트 된 라이브러리를 찾으라는 것입니다.

주제에 대해 제가 배운 내용이 여기에 있습니다!

CSS 2 사양은 사용자 기간에 양식 요소를 표시하는 방법에 대한 문제를 다루지 않았습니다!

여기에서 읽기 : 스매싱 매거진

결국 w3c 또는이 주제에 대한 다른 기술 문서를 찾을 수 없습니다. 특정 선택 상자의 양식 요소 스타일 지정은 완전히 지원되지는 않지만 약간의 노력으로 주위를 둘러 볼 수 있습니다!

HTML 양식 요소 스타일 지정

사용자 정의 위젯 빌드

링크를 읽고 전문가가 작업을 수행하는 방법을 배우는 등 해킹으로 시간을 낭비하지 마십시오!

BG 색상을 변경하기 만하면됩니다.

select { background: #6ac17a; color:#fff; }

또 다른 옵션은 Javascript를 사용하는 것입니다.

if (document.getElementById('selectID').value == '1') {
       document.getElementById('optionID').style.color = '#000';

(CSS 속성 선택기만큼 깨끗하지는 않지만 더 강력합니다)

$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
    if($row['IsActive']==0){
        $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';

$htmlIngressCsshtml 부분에 추가 하십시오 :)