CSS만 사용하여 <select> 드롭다운 스타일을 어떻게 지정하나요?
https://stackoverflow.com/questions/1895476
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
스타일을 지정하는 CSS 전용 방법이 있습니까? <select> 쓰러지 다?
스타일을 좀 바꿔야겠어 <select> JavaScript 없이 인간이 가능한 한 많은 형태를 취합니다.CSS에서 그렇게 하기 위해 사용할 수 있는 속성은 무엇입니까?
이 코드는 모든 주요 브라우저와 호환되어야 합니다.
- 인터넷 익스플로러 6, 7, 8
- 파이어폭스
- 원정 여행
JavaScript로 만들 수 있다는 것을 알고 있습니다. 예.
그리고 저는 단순한 스타일링에 대해 말하는 것이 아닙니다.저는 CSS만으로 우리가 할 수 있는 최선의 것이 무엇인지 알고 싶습니다.
나는 찾았다 유제 스택 오버플로에 대해
그리고 이 하나 Doctype.com에서.
해결책
세 가지 해결 방법은 다음과 같습니다.
솔루션 #1 - 외관:없음 - Internet Explorer 10~11 해결 방법 사용(데모)
--
기본 화살표 세트를 숨기려면 appearance: none 선택 요소에서 다음과 같이 사용자 정의 화살표를 추가하십시오. background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
브라우저 지원:
appearance: none 매우 우수한 브라우저 지원을 제공합니다(사용해도 되나요) - Internet Explorer 11(이상) 및 Firefox 34(이상)은 제외됩니다.
다음을 추가하면 이 기술을 개선하고 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;
}
}
모두 함께:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>이 솔루션은 쉽고 우수한 브라우저 지원을 제공하므로 일반적으로 충분합니다.
Internet Explorer 9(이상) 및 Firefox 34(이상)에 대한 브라우저 지원이 필요한 경우 계속 읽어보세요...
해결 방법 #2 기본 화살표를 숨기려면 선택 요소를 자릅니다(데모)
--
감싸다 select div의 요소 고정폭 그리고 overflow:hidden.
그런 다음 select 요소 너비 약 div보다 20픽셀 더 큼.
결과적으로 기본 드롭다운 화살표는 select 요소는 숨겨집니다(이로 인해 overflow:hidden 컨테이너에 있음) div의 오른쪽에 원하는 배경 이미지를 배치할 수 있습니다.
그만큼 이점 이 접근 방식 중 크로스 브라우저(Internet Explorer 8 이상, 웹킷, 그리고 도마뱀붙이).그러나, 그 불리 이 접근 방식의 특징은 옵션 드롭다운이 오른쪽에(숨겨진 20픽셀만큼 돌출되어 있다는 것입니다.)왜냐하면 옵션 요소는 선택 요소의 너비를 사용하기 때문입니다).
[그러나 사용자 정의 선택 요소가 다음 용도로만 필요한 경우에는 주의해야 합니다. 이동하는 장치 - 위의 문제는 적용되지 않습니다. 왜냐하면 각 전화기가 기본적으로 선택 요소를 여는 방식 때문입니다.따라서 모바일의 경우 이것이 최선의 해결책이 될 수 있습니다.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>Firefox에서 사용자 정의 화살표가 필요한 경우 - 이전 버전 35 - 하지만 이전 버전의 Internet Explorer를 지원할 필요는 없습니다. 계속 읽어보세요...
해결 방법 #3 - 다음을 사용하세요. pointer-events 재산 (데모)
--
여기서 아이디어는 기본 드롭다운 화살표 위에 요소를 오버레이한 다음(사용자 지정 화살표 만들기) 해당 요소에 대한 포인터 이벤트를 허용하지 않는 것입니다.
이점: WebKit과 Gecko에서 잘 작동합니다.보기에도 좋아 (튀어나오지 않고 option 강요).
불리: Internet Explorer(Internet Explorer 10 이하)는 지원하지 않습니다. pointer-events, 이는 맞춤 화살표를 클릭할 수 없음을 의미합니다.또한 이 방법의 또 다른 (명백한) 단점은 호버 효과나 손 모양 커서로 새 화살표 이미지를 대상으로 지정할 수 없다는 것입니다. 왜냐하면 포인터 이벤트가 비활성화되었기 때문입니다!
그러나 이 방법을 사용하면 Modernizer 또는 조건부 주석을 사용하여 Internet Explorer가 기본 내장 화살표로 되돌아가도록 할 수 있습니다.
참고: Internet Explorer 10에서는 지원하지 않습니다. conditional comments 더 이상:이 접근 방식을 사용하려면 아마도 다음을 사용해야 합니다. 현대화.그러나 설명된 CSS 해킹을 사용하여 Internet Explorer 10에서 포인터 이벤트 CSS를 제외하는 것은 여전히 가능합니다. 여기.
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->다른 팁
가능하지만 불행히도 대부분은 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-Arrow를 추가하고 레이블 전후에 약간의 간격을 넣어야합니다.
가장 중요한 부분은입니다 appearance 속성, 요소의 동작 방식을 변경합니다.
Gecko는 지원하지 않지만 모바일을 포함하여 거의 모든 WebKit 기반 브라우저에서 완벽하게 작동합니다. appearance WebKit뿐만 아니라 보입니다.
선택 요소 및 드롭 다운 기능 ~이다 스타일이 어렵습니다.
선택 요소의 스타일 속성 Chris Heilmann은 Ryan Dohery가 첫 번째 답변에 대한 의견에서 말한 내용을 확인합니다.
"선택 요소는 브라우저 크롬이 아닌 운영 체제의 일부입니다. 따라서 스타일이 매우 신뢰할 수 없으므로 반드시 시도하는 것이 합리적이지는 않습니다."
Select Dropdowns 스타일링 할 때 알아 차린 가장 큰 불일치는 원정 여행 그리고 구글 크롬 렌더링 (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 변수와 작은 테마 시스템을 사용하고 있습니다.
: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>다음은 모든 현대식 브라우저에서 작동하는 버전입니다. 키는 사용 중입니다 appearance:none 기본 형식을 제거합니다. 모든 서식이 사라 지므로 입력과 선택을 시각적으로 구분하는 화살표에 다시 추가해야합니다.
Working example: https://jsfiddle.net/gs2q1c7p/
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>블로그 게시물 CSS가 드롭 다운 스타일을 형성하는 방법은 JavaScript가 없습니다 나를 위해 작동하지만 실패합니다 오페라 그렇지만:
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>나는 당신의 사건을 사용하여 얻었습니다 부트 스트랩. 이것은 가장 간단한 솔루션입니다.
select.form-control {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-position: right center;
background-repeat: no-repeat;
background-size: 1ex;
background-origin: content-box;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
<form class="form-horizontal">
<select class="form-control">
<option>One</option>
<option>Two</option>
</select>
</form>
</section>참고 : Base64 물건은입니다 fa-chevron-down SVG에서.
select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}
현대식 브라우저에서는 스타일링하는 것이 비교적 고통 스럽습니다. <select> CSS에서. 와 함께 appearance: none 까다로운 부분은 화살을 대체하는 것입니다 (원하는 경우). 인라인을 사용하는 솔루션이 있습니다 data: 일반 텍스트 SVG와 URI :
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-size: 0.5em auto;
background-position: right 0.25em center;
padding-right: 1em;
background-image: url("data:image/svg+xml;charset=utf-8, \
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
<polygon points='0,0 60,0 30,40' style='fill:black;'/> \
</svg>");
}<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select style="font-size: 2rem;">
<option>Option 1</option>
<option>Option 2</option>
</select>나머지 스타일 (경계, 패딩, 색상 등)은 매우 간단합니다.
이것은 방금 시도한 모든 브라우저에서 작동합니다 (Firefox 50, Chrome 55, Edge 38 및 Safari 10). Firefox에 대한 한 가지 메모는 # 데이터 URI의 문자 (예 : fill: #000) 탈출해야합니다 (fill: %23000).
사용 clip 국경과 화살을 자르는 속성 select 요소, 래퍼에 자신의 교체 스타일을 추가하십시오.
<!DOCTYPE html>
<html>
<head>
<style>
select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select>
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>불투명도가없는 두 번째 선택을 사용하여 버튼을 클릭 할 수 있도록하십시오.
<!DOCTYPE html>
<html>
<head>
<style>
#real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
#fake { position: absolute; opacity: 0; }
body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select id="real">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
<select id="fake">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>좌표는 WebKit과 다른 브라우저마다 다르지만 @Media 쿼리 그것을 다룰 수 있습니다.
참조
사용하는 아주 좋은 예입니다 :after 그리고 :before 트릭을 수행하려면 CSS3가있는 스타일 선택 상자 | CSSDECK
예. 다음과 같이 태그 이름으로 HTML 요소를 스타일링 할 수 있습니다.
select {
font-weight: bold;
}
물론 CSS 클래스를 사용하여 다른 요소와 마찬가지로 스타일을 지정할 수도 있습니다.
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
이 요소를 편집하는 것은 권장되지 않지만 시도하려는 경우 다른 HTML 요소와 같습니다.
예제 편집 :
/* Edit select */
select {
/* CSS style here */
}
/* Edit option */
option {
/* CSS style here */
}
/* Edit selected option */
/* element attr attr value */
option[selected="selected"] {
/* CSS style here */
}
<select>
<option >Something #1</option>
<option selected="selected">Something #2</option>
<option >Something #3</option>
</select>
당신은 확실히 그것을 좋아해야합니다 CSS를 사용한 스타일 선택, 옵트 그룹 및 옵션. 여러면에서 배경색과 색상은 전체 선택이 아니라 스타일 옵션에 일반적으로 필요한 것입니다.
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: black;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: lightblue;
}
이것은 선택 요소의 배경색을 사용하고 이미지를 제거했습니다 ..
Internet Explorer 10을 기준으로, 당신은 ::-ms-expand 유사 요소 선택기 스타일을 유지하고 드롭 다운 화살표 요소를 숨기십시오.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
나머지 스타일은 다른 브라우저와 유사해야합니다.
다음은이 토론에서 내가 가장 좋아하는 아이디어를 기반으로 한 솔루션입니다. 이것은 스타일링을 허용합니다u003Cselect> 추가 마크 업없이 직접 요소.
Internet Explorer 10 (및 나중에)은 Internet Explorer 8/9를위한 안전한 폴백으로 작동합니다. 이 브라우저의 한 가지주의 사항은 배경 이미지를 배치하고 기본 확장 제어 뒤에 숨길 정도로 작아야한다는 것입니다.
HTML
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
SCSS
body {
padding: 4em 40%;
text-align: center;
}
select {
$bg-color: lightcyan;
$text-color: black;
appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
background: {
color: $bg-color;
image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
position: right;
repeat: no-repeat;
}
border: {
color: mix($bg-color, black, 80%);
radius: .2em;
style: solid;
width: 1px;
right-color: mix($bg-color, black, 60%);
bottom-color: mix($bg-color, black, 60%);
}
color: $text-color;
padding: .33em .5em;
width: 100%;
}
// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
display: none;
}
코데 펜
선택 태그를 스타일링하는 방법이 있습니다.
태그에 "크기"매개 변수가있는 경우 거의 모든 CSS가 적용됩니다. 이 트릭을 사용하여, 나는 일반적인 선택 태그와 실제로 동등한 바이올린을 만들었으며, 값은 시각적 언어로 콤보 박스처럼 수동으로 편집 할 수 있습니다 (넣지 않는 한 준비 적 입력 태그에서).
따라서 다음은 다음과 같은 원칙을 볼 수있는 최소한의 예입니다.
(클릭 메커니즘을 위해 jQuery가 필요합니다):
<style>
/* only these 2 lines are truly required */
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}
/* now you can style the hell out of them */
.stylish input { ... }
.stylish select { ... }
.stylish option { ... }
.stylish optgroup { ... }
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick="$(this).closest('div').find('select').slideToggle(110)">
<br>
<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
<optgroup label="Fantasy"></optgroup>
<option value="gandalf">Gandalf</option>
<option value="harry">Harry Potter</option>
<option value="jon">Jon Snow</option>
<optgroup label="Comics"></optgroup>
<option value="tony">Tony Stark</option>
<option value="steve">Steven Rogers</option>
<option value="natasha">Natasha Romanova</option>
</select>
</span>
</div>
몇 가지 스타일이있는 바이올린이 있습니다.https://jsfiddle.net/dkellner/7ac9us70/
(물론 가능성을 보여주기 위해 과도하게 스타일링됩니다.)
태그가 평소와 같이 속한 옵션을 캡슐화하지 않는 방법에 주목하십시오. 예, 이것은 의도적이며 스타일을위한 것입니다. (잘 관리 된 방법은 훨씬 덜 스타일이 될 것입니다.) 그리고 그렇습니다. 그들은 이런 식으로 완벽하게 잘 작동합니다.
누구든지 No-JS 부분을 지적하기 전에 : 나는 그 질문이 "JavaScript 없음"이라고 말한다는 것을 알고 있습니다. 나에게 이것은 더 비슷하다 플러그인을 귀찮게하지 말아요, 그들이 할 수 있다는 것을 알고 있지만 기본 방법이 필요합니다.. 플러그인도없고 추가 스크립트가 포함되어 있지 않으며 태그의 "Onclick"내부에 맞는 것만 이해합니다. 유일한 종속성은 jQuery입니다. 기본 "Document.parentNode.getElementsByTagName"Madness를 피하는 것입니다. 그러나 그런 식으로 작동 할 수 있습니다. 그렇습니다. 이것은 기본 스타일과 일부 OnClick 핸들러가있는 기본 선택 태그입니다. 분명히 "JavaScript 솔루션"이 아닙니다.
즐기다!
드롭 다운에 호버 스타일을 추가 할 수도 있습니다.
select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>CSS 및 HTML 전용 솔루션
Chrome, Firefox 및 Internet Explorer 11과 호환되는 것 같습니다. 그러나 다른 웹 브라우저에 대한 피드백을 남겨주세요.
제안한대로 Danield의 대답, 나는 select를 div (X- 브라우저 호환성을위한 2 개의 div조차도)에 랩핑하여 예상되는 동작을 얻습니다.
http://jsfiddle.net/bjap2/를 참조하십시오.
HTML :
<div class="sort-options-wrapper">
<div class="sort-options-wrapper-2">
<select class="sort-options">
<option value="choiceOne">choiceOne</option>
<option value="choiceOne">choiceThree</option>
<option value="choiceOne">choiceFour</option>
<option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
</select>
</div>
<div class="search-select-arrow-down"></div>
</div>
두 개의 div 래퍼를 주목하십시오.
또한 추가 된 DIV가 추가 된 곳을 확인하여 원하는 곳에 화살표 다운 버튼을 놓습니다 (절대적으로 위치). 여기에 왼쪽에 넣습니다.
CSS
.sort-options-wrapper {
display: inline-block;
position: relative;
border: 1px solid #83837F;
}
/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
overflow: hidden;
}
select {
margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some
browsers have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height: 10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}
세 번째 방법 Danield의 대답 호버 효과 및 기타 마우스 이벤트와 함께 작동하도록 개선 될 수 있습니다. 마크 업에서 선택 요소 바로 다음에 "버튼"요소가 오는지 확인하십시오. 그런 다음 + CSS 선택기를 사용하여 타겟팅하십시오.
HTML :
<select class="select-input">...</select>
<div class="select-button"></div>
CSS :
.select-input:hover+.select-button {
<Hover styles here>
}
그러나 이것은 "버튼"만이 아니라 선택 요소를 통해 어디서나 호버링 할 때 호버 효과를 보여줍니다.
나는이 방법을 Angular와 함께 사용하여 (내 프로젝트가 각도 응용 프로그램이기 때문에) 전체 선택 요소를 다루고 Angular가 "버튼"-요소에서 선택한 옵션의 텍스트를 표시하도록합니다. 이 경우 선택의 전역에서 어디서나 호버링 할 때 호버 효과가 적용된다는 것이 완벽합니다.
JavaScript 없이는 작동하지 않으므로이 작업을 수행하려면 사이트가 JavaScript없이 작동 해야하는 경우 스크립트가 향상에 필요한 요소와 클래스를 추가해야합니다. 이렇게하면 JavaScript가없는 브라우저는 올바르게 업데이트되지 않는 스타일의 배지 대신 단순히 정상적이고 스타일링되지 않은 선택을 얻습니다.
사용자 정의 CSS 스타일을 선택하십시오
테스트 Internet Explorer (10 및 11), Edge, Firefox 및 Chrome
select::-ms-expand {
display: none;
}
select {
display: inline-block;
box-sizing: border-box;
padding: 0.5em 2em 0.5em 0.5em;
border: 1px solid #eee;
font: inherit;
line-height: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 15px top 1em, right 10px top 1em;
background-size: 5px 5px, 5px 5px;
}<select name="">
<option value="">Lorem</option>
<option value="">Lorem Ipsum</option>
</select>
<select name="" disabled>
<option value="">Disabled</option>
</select>
<select name="" style="color:red;">
<option value="">Color!</option>
<option value="">Lorem Ipsum</option>
</select>