선택한 옵션의 글꼴 크기를 변경하려면 어떻게 해야 합니까?

선택 옵션 드롭다운 목록을 스타일 지정하려고 합니다. 옵션의 글꼴 크기를 기본값과 다르게 만들 수 있나요? 예를 들어, 기본값은 다음과 같습니다.

-- Select Country --

사이즈는 7펜스, 옵션 중 하나는

Georgia

사이즈는 13pt입니다.

드롭다운 리스트입니다.

.select_join {
  width: 170px;
  height: 28px;
  overflow: hidden;
  background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
  border: #FEFEFE 1px solid;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
  box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
  background: transparent;
  width: 170px;
  font-size:7pt;
  color:grey;
  border: 0;
  border-radius: 0;
  height: 28px;
  -webkit-appearance: none;
}
.select_join select:focus {
  outline: none;
}
<div style="background-color:pink;height:150px; text-align:center;">
  <br/>
  <div class="select_join" style="margin-left:15px">
    <select name="txtCountry">
      <option>-- Select Country --</option>
      <option value="1">Georgia</option>
      <option value="2">Afghanistan</option>
    </select>
  </div>
</div>

[JSFiddle에 대한 설명](http://jsfiddle.net/VggvD/50/)을 참조하십시오.

안타깝게도 파이어폭스에서만 작동합니다. 다른 브라우저가 '' 요소의 스타일링을 지원하지 않는 것은 아닐까요?

테스트한 브라우저:

  • 크롬: 버전 27.0.1453.116m
  • IE: 10
  • 파이어폭스: 22.0
TylerH
편집된 질문17일 11월 2017 в 10:04
프로그래밍
css3 font-size css html-select
2일 7월 2013 в 7:33
18 파운드
해결책

CSS 클래스를 '' 태그에 추가하여 스타일 지정: [http://jsfiddle.net/Ahreu/](http://jsfiddle.net/Ahreu/50/))

현재 웹킷 브라우저들은 이 동작을 지원하지 않는데, 이는 사양에 의해 정의되지 않았기 때문이다. 이것 좀 보세요: 선택한 태그's 옵션 요소의 스타일 지정 방법?

TylerH
편집된 답변17일 11월 2017 в 10:06
해설 (4)

옵션 요소를 13pt로 지정

select option{
    font-size: 13pt;
}

그 다음 첫 번째 옵션 요소는 7pt가 됩니다.

select option:first-child {
    font-size: 7pt;
}

데모 실행 중: http://jsfiddle.net/VggvD/1/

해설 (3)

이거 먹어봐

http://jsfiddle.net/VggvD/2/

CSS 코드 추가

.select_join option{
    font-size:13px;
}
Falguni Panchal
편집된 답변2일 7월 2013 в 8:37
해설 (1)