HTML5 데이터 목록 옵션에 CSS 스타일을 적용하는 방법이 있습니까?


84

데이터 목록의 다양한 옵션 목록이 표시되는 방식을 수정하고 싶습니다. 일부 CSS 속성을 적용 할 수 있습니까?

<input list="languages" id="language_id">
<datalist id="languages">
      <option value="html">HTML</option>
      <option value="java">Java</option>
      <option value="perl">Perl</option>
      <option value="php">PHP</option>
      <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

나는 시도했다

option {
    background: red;
}

하지만 작동하지 않는 것 같습니다.


답변:


82

선택 요소 와 마찬가지로 데이터 목록 요소는 스타일 지정에 유연성이 거의 없습니다. 질문이 요청한 경우 제안 된 용어의 스타일을 지정할 수 없습니다.

브라우저는 이러한 요소에 대해 고유 한 스타일을 정의합니다.


136
이 때문에 너무 슬퍼
로이드 은행

4
관련성 : Firefox 공급 업체별 CSS 확장 목록 (예 : 자리 표시자를 포함하지만 데이터 목록과 같지 않음) : developer.mozilla.org/en-US/docs/Web/CSS/Reference/…
ANeves는 SE가 악하다고 생각합니다.

데이터 목록 및 선택과 같은 기본 요소의 스타일을 일관되게 변경하는 방법이 있었으면합니다
t3__rry

-6

시험:

input[list]
{
  background: red;
}

5
Firefox 30에서는 input[list]목록이 아닌 텍스트 상자의 스타일을 지정합니다. IE 11에서는 텍스트 상자 목록의 스타일을 지정합니다 .
Darren Griffith
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.