질문자 :Jitendra Vyas
<select> 드롭다운 스타일을 지정하는 CSS 전용 방법이 있습니까?
JavaScript 없이 가능한 한 인간적으로 가능한 <select> 양식의 스타일을 지정해야 합니다. CSS에서 그렇게 하는 데 사용할 수 있는 속성은 무엇입니까?
이 코드는 모든 주요 브라우저와 호환되어야 합니다.
JavaScript: Example 으로 만들 수 있다는 것을 알고 있습니다.
그리고 나는 단순한 스타일에 대해 말하는 것이 아닙니다. CSS만으로 우리가 할 수 있는 최선이 무엇인지 알고 싶습니다.
Stack Overflow 에서 비슷한 질문 을 찾았습니다.
그리고 이것은 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를 제외하고는 매우 우수한 브라우저 지원( 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; } } 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(https://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에 대한 브라우저 지원이 필요한 경우 미리 읽어보십시오.
솔루션 #2 기본 화살표를 숨기려면 선택 요소를 자릅니다( 데모 ).
--
고정 너비 및 overflow:hidden 을 사용하여 div select 요소를 래핑합니다.
그런 다음 select 요소에 div보다 약 20픽셀 더 큰 너비를 지정합니다.
select 요소의 기본 드롭다운 화살표가 숨겨지고( overflow:hidden 으로 인해) 원하는 배경 이미지를 div의 오른쪽에 배치할 수 있습니다.
이 접근 방식의 장점 은 브라우저 간(Internet Explorer 8 이상, WebKit 및 Gecko )이라는 것입니다. 그러나 이 접근 방식의 단점 은 옵션 드롭다운이 오른쪽에 돌출되어 있다는 것입니다(옵션 요소가 선택 요소의 너비를 차지하기 때문에 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(https://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>버전 35 이전의 Firefox에서 사용자 정의 화살표가 필요하지만 Internet Explorer의 이전 버전을 지원할 필요가 없다면 계속 읽으십시오...
솔루션 #3 - pointer-events 속성 사용( 데모 )
--
여기에서 아이디어는 네이티브 드롭다운 화살표 위에 요소를 오버레이한 다음(사용자 정의를 만들기 위해) 포인터 이벤트를 허용하지 않는 것입니다.
장점: WebKit 및 Gecko에서 잘 작동합니다. 보기에도 좋습니다( option 요소가 돌출되지 않음).
단점: Internet Explorer(Internet Explorer 10 이하)는 pointer-events 지원하지 않습니다. 즉, 사용자 정의 화살표를 클릭할 수 없습니다. 또한, 이 방법의 또 다른 (명백한) 단점은 포인터 이벤트를 비활성화했기 때문에 호버 효과나 손 모양 커서로 새 화살표 이미지를 대상으로 지정할 수 없다는 것입니다!
그러나 이 방법을 사용하면 Modernizer 또는 조건부 주석을 사용하여 Internet Explorer를 기본 제공 화살표로 되돌릴 수 있습니다.
주의: Internet Explorer 10은 conditional comments 지원하지 않습니다. 이 접근 방식을 사용하려면 Modernizr 을 사용해야 합니다. 그러나 여기에 설명된 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(https://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 기반 브라우저에서 이루어집니다. 다음은 대부분의 최신 브라우저에서 현재 지원되는 CSS 속성과 일치하도록 개선된 내장 개발자 도구 검사기를 통해 Chrome 옵션 패널에서 수집한 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는 WebKit만큼 appearance 을 지원하지 않지만 모바일 브라우저를 포함한 거의 모든 WebKit 기반 브라우저에서 완벽하게 작동합니다.
선택 요소와 해당 드롭다운 기능 은 스타일 지정이 어렵습니다.
Chris Heilmann의 선택 요소에 대한 스타일 속성은 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 및 Google Chrome 렌더링입니다(Firefox는 CSS를 통해 완전히 사용자 정의할 수 있음). 인터넷의 모호한 깊이를 통해 약간의 검색 후 나는 WebKit으로 내 불안을 거의 완전히 해결하는 다음을 발견했습니다.
Safari 및 Google 크롬 수정 :
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; }다음은 모든 최신 브라우저에서 작동하는 버전입니다. 키는 기본 서식을 제거하는 appearance:none 모든 서식이 사라졌으므로 선택 항목과 입력 항목을 시각적으로 구분하는 화살표에 다시 추가해야 합니다.
작업 예: 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+/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가 작동하지 않지만 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>Bootstrap을 사용하여 귀하의 사례에 도달했습니다. 이것은 작동하는 가장 간단한 솔루션입니다.
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+++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 항목은 SVG에서 fa-chevron-down
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>최신 브라우저에서는 CSS에서 <select> 스타일을 지정하는 것이 상대적으로 어렵지 않습니다. 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 ).
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;}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>버튼을 클릭할 수 있도록 하려면 불투명도가 0인 두 번째 선택을 사용합니다.
<!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 쿼리 가 이를 커버할 수 있습니다.
참고문헌
이 요소를 편집하는 것은 권장되지 않지만 시도하려는 경우 다른 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>이 바이올린을 확인하고 과도한 스타일을 용서하십시오. https://jsfiddle.net/dkellner/7ac9us70/
비하인드 트릭: <select> 태그가 "size"라는 속성을 가져오자 마자 고정 높이 목록으로 작동하고 갑자기 어떤 이유로 인해 스타일을 지정할 수 있습니다. 이제 엄밀히 말해서 고정 목록은 부작용이지만 "드롭다운 모양"에 사용하기 때문에 더 도움이 됩니다.
최소한의 예:
<style> .stylish span {position:relative;} .stylish select {position:absolute;left:0px;display:none} </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="1"> Gandalf </option> <option value="2"> Harry Potter </option> <option value="3"> Jon Snow </option> <!-- ... and so on --> </select> </span> </div> (간단하게 유지하기 위해 jQuery로 했습니다. 하지만 jQuery 없이도 똑같이 할 수 있습니다.)
이 솔루션은 단순한 선택 이상의 것을 제공합니다. 값도 수동으로 편집할 수 있습니다. 기본 선택 제한 방식을 선호하는 경우 읽기 전용 속성을 사용하십시오.
스타일 지정 가능성을 최대화하기 위해 <optgroup> 태그는 자식 주위 에 있지 않고 자식보다 먼저 이동됩니다. 그것은 의도적이며 시각적으로 더 명확하며 그들은 이렇게 일하게 되어 기쁩니다. 걱정하지 마십시오.
Javascripts: 예, OP가 "no Javascript"라고 말한 것을 알고 있지만 플러그인을 사용하지 마십시오 . 괜찮습니다. 이 라이브러리에는 라이브러리가 필요하지 않습니다. 내가 말했듯이 jQuery조차도 아닙니다. 단지 예제의 명확성을 위한 것입니다.
트릭을 수행 :after 및 :before 를 사용하는 아주 좋은 예는 CSS3로 선택 상자 스타일링 | CSS덱
예. 다음과 같이 태그 이름으로 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>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; }이것은 선택 요소에 배경색을 사용하고 이미지를 제거했습니다.
다음은 이 토론에서 내가 가장 좋아하는 아이디어를 기반으로 한 솔루션입니다. 이를 통해 추가 마크업 없이 직접 <select> 요소의 스타일을 지정할 수 있습니다.
Internet Explorer 8/9에 대한 안전한 대체와 함께 Internet Explorer 10(이상)에서 작동합니다. 이러한 브라우저에 대한 한 가지 주의 사항은 배경 이미지가 위치해야 하고 기본 확장 컨트롤 뒤에 숨길 수 있을 만큼 작아야 한다는 것입니다.
<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> 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로 선택, optgroup 및 옵션을 스타일링 하는 것처럼 확실히 해야 합니다. 여러 면에서 배경색과 색상은 전체 선택 항목이 아니라 스타일 옵션에 일반적으로 필요한 것입니다.
Internet Explorer 10부터 ::-ms-expand 의사 요소 선택기를 사용하여 드롭다운 화살표 요소의 스타일을 지정하고 숨길 수 있습니다.
select::-ms-expand { display:none; /* or visibility: hidden; to keep it's space/hitbox */ }나머지 스타일은 다른 브라우저와 유사해야 합니다.
드롭다운에 호버 스타일을 추가할 수도 있습니다.
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>Danield의 답변 에서 세 번째 방법은 호버 효과 및 기타 마우스 이벤트와 함께 작동하도록 개선할 수 있습니다. "버튼" 요소가 마크업의 선택 요소 바로 뒤에 오는지 확인하십시오. 그런 다음 + CSS 선택기를 사용하여 대상을 지정합니다.
<select class="select-input">...</select> <div class="select-button"></div> .select-input:hover+.select-button { <Hover styles here> }그러나 이것은 "버튼"뿐만 아니라 선택 요소 위에 아무 곳이나 가리킬 때 호버 효과를 표시합니다.
이 방법을 Angular와 함께 사용하고 있습니다(내 프로젝트는 어쨌든 Angular 응용 프로그램이기 때문에). 전체 선택 요소를 포함하고 Angular가 "버튼" 요소에서 선택한 옵션의 텍스트를 표시하도록 합니다. 이 경우 선택 항목의 아무 곳이나 가리킬 때 호버 효과가 적용되는 것이 완벽합니다.
하지만 JavaScript 없이는 작동하지 않으므로 이 작업을 수행하고 사이트가 JavaScript 없이 작동해야 하는 경우 스크립트가 향상에 필요한 요소와 클래스를 추가하는지 확인해야 합니다. 그렇게 하면 JavaScript가 없는 브라우저는 올바르게 업데이트되지 않는 스타일이 지정된 배지 대신에 단순히 스타일이 지정되지 않은 일반 선택을 얻게 됩니다.
CSS 및 HTML 전용 솔루션
Chrome, Firefox 및 Internet Explorer 11과 호환되는 것 같습니다. 하지만 다른 웹 브라우저에 대한 의견을 남겨주세요.
Danield의 답변 에서 제안한 대로 예상되는 동작을 얻기 위해 선택 항목을 div(x-브라우저 호환성을 위한 2개의 div)로 래핑합니다.
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가 추가되었음을 알 수 있습니다. 여기서는 왼쪽에 배치합니다.
.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; }출처 : http:www.stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css
| 대문자와 숫자를 사용한 무작위 문자열 생성 (0) | 2022.02.24 |
|---|---|
| *args 및 **kwargs 사용 [중복] (0) | 2022.02.24 |
| SQL Server에서 INNER JOIN을 사용하여 어떻게 삭제할 수 있습니까? (0) | 2022.02.24 |
| init으로 생성된 git 저장소를 완전히 삭제하는 방법은 무엇입니까? (0) | 2022.02.24 |
| 모나드란? (0) | 2022.02.24 |