선택 상자에서 채우기

선택 상자는 CSS로 스타일에 약간의 고통이 있지만 고급 기술을 사용하지 않고도 어쨌든 텍스트가 없으면 조금 더 아래로 밀어 넣을 수 있습니다. 오른쪽에있는 화살? 여기 http://cssdeck.com/labs/styling-select-box-with-css3 선택 상자에서 채우기

2012-04-16 Brett

당신은 어쩌면에 패딩을 변경하려고 할 수 중첩 된 'option'요소? 그냥 생각 ... –

아니, 거기 있지 않습니다. 선택 상자의 스타일은 통증을 언급 한 것과 같습니다. 이 바로 그 이유 때문에 선택 상자를위한 많은 jQuery 플러그인이 있습니다. 목록 상자에서 사용할 수있는 크로스 브라우저 스타일은 매우 제한적입니다. –

이것이 당신이 원하는 바가 아닙니까? http://jsfiddle.net/LpvDg/ – Wasbazi

흥미 시험 저자는 오른쪽에있는 화살표를 포함하고 다른 브라우저를 타겟팅 벤더 접두사 CSS를 이용하여, 자신을 만들었다. 그렇게하면 패딩은 모두 무료입니다.

2013-08-10 21:19:59 commonpike

괜찮습니다. 그게 내 코드가 아니야. 그것의 흥미로운, 그리고 그것 * 케이스의 90 %에서 작동합니다 * 순수한 CSS 솔루션입니다. – commonpike

이것을 CSS 클래스에 추가하십시오. 어쩌면이게 도움이 될까요?

-webkit-appearance:none; 
-moz-appearance:none; 
appearance:none;

2014-01-10 09:45:20 Demilio

그것은 화살을 숨기고있다. .. – romainm

select 이후 박스는 다른 브라우저, 특히 운영 체제에서 다르게 나타납니다, 당신은 일관성을 보장 할 수 없습니다.

예를 들어, 내가 Mac에서 할 수있는 형식의 최소 금액은 이것이다 :

select { height:40px; background:transparent; }

을 그리고는 다음과 같습니다

Select Box

2014-01-10 10:36:30 redolent

당신은 어떤 제안이라도 가지고 있냐? –

사용자 지정 선택 상자를 권장합니다 (예 : https://jqueryui.com/selectmenu/). – redolent

답변