선택 옵션 드롭다운 목록을 스타일 지정하려고 합니다. 옵션의 글꼴 크기를 기본값과 다르게 만들 수 있나요? 예를 들어, 기본값은 다음과 같습니다.
-- 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에 대한 설명](
)을 참조하십시오.안타깝게도 파이어폭스에서만 작동합니다. 다른 브라우저가 '
테스트한 브라우저:
CSS 클래스를 '
현재 웹킷 브라우저들은 이 동작을 지원하지 않는데, 이는 사양에 의해 정의되지 않았기 때문이다. 이것 좀 보세요: 선택한 태그's 옵션 요소의 스타일 지정 방법?
이거 먹어봐
CSS 코드 추가
.select_join option{
font-size:13px;
}