CSS로 선택 상자 스타일링

CSS를 통해 선택 상자의 스타일에 문제가 있습니다. 그것은 나의 페이지에있는 puts에서 다른 것과 같이 보일 것이다. 다음은 현재 사용중인 코드의 예입니다.CSS로 선택 상자 스타일링

<select> 
    <option selected="selected" value="1">1</option> 
    <option value="2">2</option> 
</select> 
<br> 
<input type="text" style="width:35px;margin-right:0px;"> 
<input type="text" style="width:180px;">

그리고 여기가 CSS 내가 사용 : 가지고있는 경우 여기에

input[type=text], textarea, select{ 
    border: 1px solid #cccccc; 
    font:10px sans-serif; 
    background-color: #ffffff; 
    width: 240px; 
    height:14px; 
    padding:5px; 
    color: #101010; 
}

당신은 문제가있는 바이올린을 찾을 수 있습니다 http://jsfiddle.net/6VGWc/. 선택 상자는 "보이지 않음"입니다. 네가 나를 도울 수 있기를 바랍니다.

출처

2011-10-14 Frederick Behrends

나는 눈에 보이는 질문이 무엇인지 전혀 모르겠어요,하지만 box-sizing 규칙을 추가하면 콘텐츠를합니다 (select 요소의 첫 번째 옵션을)한다 :

-moz-box-sizing: content-box; /* for Firefox/Gecko browsers */ 
-webkit-box-sizing: content-box; /* for Webkit-based browsers, Safari, Chrome, Chromium... */ 
-o-box-sizing: content-box; /* for Opera */ 
box-sizing: content-box; /* or 'padding-box' or 'border-box' */

Updated JS Fiddle demo.

select 상자의 스타일을 지정하는 것은 종종 브라우저 자체가 아니라 운영체제가 제공/처리하는 요소 (대체로 img과 비슷 함)로 대체되기 때문에 교차 브라우저를 사용하기가 종종 어렵다는 점에 유의하십시오.

그러나 요소에 특정 height (또는 min-height)을 선언하도록 선택하면이 방법이 효과적 일 수 있지만 나중에 스타일이 변경되는 경우 관리가 어려울 수 있습니다.

출처

2011-10-14 10:24:26