<select>드롭 다운 스타일을 지정하는 CSS 전용 방법이 있습니까?
<select>JavaScript 없이도 가능한 한 인간적으로 양식 을 스타일링해야합니다 . CSS에서 사용할 수있는 속성은 무엇입니까?
이 코드는 모든 주요 브라우저와 호환되어야합니다.
- Internet Explorer 6, 7, 8
- Firefox
- 원정 여행
JavaScript로 만들 수 있다는 것을 알고 있습니다 : Example .
그리고 간단한 스타일링에 대해서는 이야기하지 않습니다. CSS로만 할 수있는 최선의 방법을 알고 싶습니다.
Stack Overflow 에서 비슷한 질문 을 발견했습니다 .
그리고 이것은 Doctype.com에 있습니다.
답변
다음은 세 가지 해결책입니다.
해결 방법 # 1-모양 : 없음-Internet Explorer 10-11 해결 방법 ( 데모 )
–
appearance: noneselect 요소에 설정된 기본 화살표를 숨기려면background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}브라우저 지원 :
appearance: noneInternet Explorer 11 이상 및 Firefox 34 이상을 제외하고 브라우저 지원 기능이 우수합니다 ( caniuse ).
이 기술을 향상시키고 Internet Explorer 10 및 Internet Explorer 11에 대한 지원을 추가하여 추가 할 수 있습니다
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}Internet Explorer 9가 중요한 경우 기본 화살표를 제거 할 수있는 방법이 없지만 (두 개의 화살표가 있음을 의미 함) 펑키 한 Internet Explorer 9 선택기를 사용할 수 있습니다.
최소한 사용자 정의 화살표를 취소하려면 기본 선택 화살표를 그대로 둡니다.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}모두 함께:
이 솔루션은 쉽고 브라우저 지원 기능이 뛰어나 일반적으로 충분합니다.
Internet Explorer 9 이상 및 Firefox 34 이상에 대한 브라우저 지원이 필요한 경우 계속 읽으십시오 …
해결 방법 # 2 기본 화살표 ( 데모 ) 를 숨기려면 select 요소를 자릅니다.
–
랩 select로모그래퍼 사업부에서 요소를 고정 폭 과 overflow:hidden.
그런 다음 select요소에 div보다 약 20 픽셀 큰 폭을 지정 하십시오 .
결과적으로 요소의 기본 드롭 다운 화살표가 select( overflow:hidden컨테이너 로 인해) 숨겨 지고 원하는 배경 이미지를 div의 오른쪽에 배치 할 수 있습니다.
이 방법 의 장점 은 크로스 브라우저 (Internet Explorer 8 이상, WebKit 및 Gecko )라는 것입니다. 그러나이 방법 의 단점 은 옵션 드롭 다운이 오른쪽에서 튀어 나온다는 것입니다 (옵션 요소는 선택 요소의 너비를 갖기 때문에 우리가 숨긴 20 픽셀만큼).
그러나 맞춤 선택 요소가 휴대 기기 에만 필요한 경우 각 전화가 기본적으로 선택 요소를 여는 방식으로 인해 위의 문제는 적용되지 않습니다. 모바일의 경우 이것이 최선의 해결책 일 수 있습니다.]
Firefox에서 사용자 정의 화살표가 필요한 경우- 버전 35 이전 필요하지만 이전 버전의 Internet Explorer를 지원할 필요가없는 경우 계속 읽으십시오 …
솔루션 # 3- pointer-events속성 사용 ( 데모 )
–
여기서 아이디어는 기본 드롭 다운 화살표 위에 요소를 오버레이하고 (사용자 정의 화살표를 작성하기 위해) 포인터 이벤트를 허용하지 않는 것입니다.
장점 : WebKit 및 Gecko에서 잘 작동합니다. 너무 좋아 보인다 (튀어 나오지 않음)option 요소를 ).
단점 : Internet Explorer (Internet Explorer 10 이하)는 지원하지 않습니다pointer-events 사용자 정의 화살표를 클릭 할 수 없습니다. 또한이 방법의 또 다른 단점은 포인터 이벤트를 비활성화했기 때문에 호버 효과 또는 손 모양 커서로 새 화살표 이미지를 대상으로 지정할 수 없다는 것입니다!
그러나이 방법을 사용하면 Modernizer 또는 조건부 주석을 사용하여 Internet Explorer를 기본 제공 화살표로 되돌릴 수 있습니다.
NB : Internet Explorer 10은 conditional comments더 이상 지원 하지 않습니다.이 방법을 사용하려면 Modernizr 을 사용해야합니다 . 그러나 여기에 설명 된 CSS 핵을 사용하여 Internet Explorer 10에서 포인터 이벤트 CSS를 제외 할 수 있습니다 .
답변
가능하지만 불행하게도 대부분의 개발자는 WebKit 기반 브라우저에서 개발자가 요구하는 범위까지 가능합니다. 다음은 내장 개발자 도구 관리자를 통해 Chrome 옵션 패널에서 수집 한 CSS 스타일링의 예입니다. 대부분의 최신 브라우저에서 현재 지원되는 CSS 속성과 일치하도록 개선되었습니다.
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* Fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}WebKit 기반 브라우저 내의 모든 페이지에서이 코드를 실행하면 선택 상자의 모양이 바뀌고 표준 OS 화살표를 제거하고 PNG 화살표를 추가하고 레이블 앞뒤에 약간의 간격을 두어야합니다.
가장 중요한 부분은 appearance요소의 동작 방식을 변경하는 속성입니다.
Gecko는 appearanceWebKit뿐만 아니라 지원하지 않지만 모바일 브라우저를 포함한 거의 모든 WebKit 기반 브라우저에서 완벽하게 작동합니다 .
답변
선택 요소와 드롭 다운 기능 은 스타일을 지정하기 어렵습니다.
Chris Heilmann의 select 요소 에 대한 스타일 속성은 Ryan Dohery가 첫 번째 답변에 대한 주석에서 말한 내용을 확인합니다.
“선택 요소는 브라우저 크롬이 아닌 운영 체제의 일부입니다. 따라서 스타일을 지정하는 것이 매우 신뢰할 수 없으므로 반드시 시도해야하는 것은 아닙니다.”
답변
이미지를 사용할 수 없으며 브라우저 지원에 의해 제한되지 않은 것을 제외 하고는이 정확한 문제가있었습니다. 이것은 “사양”이어야하고 운이 좋으면 결국 어디에서나 작동하기 시작 합니다.
의사 요소는 선택 요소에 대해 작동하지 않으므로 레이어 회전 된 배경 레이어를 사용하여 드롭 다운 화살표를«잘라 내기»합니다.
편집 : 이 업데이트 버전에서는 CSS 변수와 작은 테마 시스템을 사용하고 있습니다.
:root {
--radius: 2px;
--baseFg: dimgray;
--baseBg: white;
--accentFg: #006fc2;
--accentBg: #bae1ff;
}
.theme-pink {
--radius: 2em;
--baseFg: #c70062;
--baseBg: #ffe3f1;
--accentFg: #c70062;
--accentBg: #ffaad4;
}
.theme-construction {
--radius: 0;
--baseFg: white;
--baseBg: black;
--accentFg: black;
--accentBg: orange;
}
select {
font: 400 12px/1.3 sans-serif;
-webkit-appearance: none;
appearance: none;
color: var(--baseFg);
border: 1px solid var(--baseFg);
line-height: 1;
outline: 0;
padding: 0.65em 2.5em 0.55em 0.75em;
border-radius: var(--radius);
background-color: var(--baseBg);
background-image: linear-gradient(var(--baseFg), var(--baseFg)),
linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
background-position: right 20px center, right bottom, right bottom, right bottom;
}
select:hover {
background-image: linear-gradient(var(--accentFg), var(--accentFg)),
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}
select:active {
background-image: linear-gradient(var(--accentFg), var(--accentFg)),
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
color: var(--accentBg);
border-color: var(--accentFg);
background-color: var(--accentFg);
}<select>
<option>So many options</option>
<option>...</option>
</select>
<select class="theme-pink">
<option>So many options</option>
<option>...</option>
</select>
<select class="theme-construction">
<option>So many options</option>
<option>...</option>
</select>답변
스타일링 선택 드롭 다운에서 가장 큰 불일치가 발견 된 것은 Safari 및 Chrome 렌더링입니다 (Firefox는 CSS를 통해 완벽하게 사용자 정의 할 수 있음). 불분명 한 인터넷 깊이를 검색 한 결과 다음과 같은 문제가 발생하여 WebKit으로 내 자격을 거의 완전히 해결했습니다.
사파리 및 구글 수정 :
select {
-webkit-appearance: none;
}그러나 드롭 다운 화살표는 제거됩니다. 주변 div에 배경, 음수 여백이 있거나 근처 에 선택 드롭 다운 위에 놓아 드롭 다운 화살표를 추가 할 수 있습니다 .
* 자세한 정보 및 기타 변수는 CSS 특성 : -webkit-appearance 에서 사용할 수 있습니다 .
답변
<select>태그는 브라우저에서 렌더링되는 HTML 페이지의 다른 HTML 요소와 마찬가지로 CSS를 통해 스타일을 지정할 수 있습니다. 아래는 페이지에 선택 요소를 배치하고 옵션의 텍스트를 파란색으로 렌더링하는 (매우 간단한) 예입니다.
HTML 파일 예 (selectExample.html) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>CSS 파일 예 (selectExample.css) :
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}답변
블로그 게시물 방법 CSS 양식 드롭 다운 스타일 JavaScript가 작동 하지 않지만 Opera 에서는 실패합니다 .
select {
border: 0 none;
color: #FFFFFF;
background: transparent;
font-size: 20px;
font-weight: bold;
padding: 2px 10px;
width: 378px;
*width: 350px;
*background: #58B14C;
}
#mainselection {
overflow: hidden;
width: 350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>