html - 배경 - selectbox image




CSS만으로<select> 드롭 다운을 스타일 화하는 방법은 무엇입니까? (16)

Internet Explorer 10에서, ::-ms-expand 의사 요소 선택기를 사용하여 드롭 다운 화살표 요소의 스타일을 지정하고 숨길 수 있습니다.

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

나머지 스타일은 다른 브라우저와 비슷해야합니다.

다음은 IE10을 지원하는 Danield의 jsfiddle의 기본 포크입니다.

<select> 드롭 다운을 스타일링하는 CSS 전용 방법이 있습니까?

자바 스크립트없이 가능한 한 인간적인면에서 <select> 양식의 스타일을 지정해야합니다. CSS에서 사용할 수있는 속성은 무엇입니까?

이 코드는 모든 주요 브라우저와 호환되어야합니다.

  • Internet Explorer 6,7 및 8
  • Firefox
  • 원정 여행

JavaScript로 만들 수 있다는 것을 알고 있습니다 : Example .

그리고 나는 단순한 스타일링에 대해서 말하고있는 것이 아닙니다. 우리가 CSS로만 할 수있는 최선의 방법을 알고 싶습니다.

스택 오버플로에서도 비슷한 질문 을 발견했습니다.

그리고 이것은 Doctype.com에 있습니다.


select 요소와 드롭 다운 기능 스타일을 지정하기 어렵습니다.

Chris Heilmann이 선택한 요소대한 스타일 속성은 Ryan Dohery가 첫 번째 답변에 대한 의견에서 말한 내용을 확인합니다.

"select 요소는 브라우저 크롬이 아닌 운영 체제의 일부이므로 스타일을 적용하기가 매우 어렵고 어쨌든 시도해 보는 것이 반드시 필요한 것은 아닙니다."


다음은 모든 최신 브라우저에서 작동하는 버전입니다. 열쇠는 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+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>


불행하게도 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 Fx (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 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 )도 지원하지 않지만 모바일을 포함한 거의 모든 웹킷 기반 브라우저에서 완벽하게 작동합니다.


스타일 선택 드롭 다운이 SafariGoogle 크롬 렌더링 (CSS를 통해 Firefox가 완벽하게 사용자 정의 가능) 인 경우 가장 큰 불일치가있었습니다. 인터넷의 불분명 한 깊이를 통해 검색 한 결과, 다음과 같은 점을 발견하게되었습니다. WebKit을 사용하여 나의 가책을 거의 완전히 해결했습니다.

Safari 및 Google 크롬 수정 사항 :

select {
  -webkit-appearance: none;
}

그러나 이것은 드롭 다운 화살표를 제거합니다. 배경, 음수 여백 또는 선택 드롭 다운 위에 절대 배치 된 인근 div 를 사용하여 드롭 다운 화살표를 추가 할 수 있습니다.

* 추가 정보 및 기타 변수는 CSS 속성 : -webkit-appearance 에서 사용할 수 있습니다.



이 요소를 편집하는 것은 좋지 않지만 다른 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>

이 토론에서 내가 좋아하는 아이디어를 토대로 한 해결책이 있습니다. 이를 통해 추가 마크 업없이 요소를 직접 스타일링 할 수 있습니다.

IE8 / 9의 안전한 대체 기능을 갖춘 IE10 + 작동. 이러한 브라우저에 대한주의 사항 중 하나는 배경 이미지가 네이티브 확장 컨트롤 뒤에 숨어있을 정도로 작아야한다는 것입니다.

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 IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
    display: none;
}

코데 핀

http://codepen.io/ralgh/pen/gpgbGx


최신 브라우저에서는 CSS에서 <select> 스타일을 비교적 쉽게 만들 수 있습니다. appearance: none 아무리 까다로운 부분이라도 화살표를 교체하는 것은 아닙니다 (원하는 경우). 다음은 인라인 data: 를 사용하는 솔루션입니다 data: 일반 텍스트가있는 URI SVG :

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). 파이어 폭스에 관한 한가지주의 사항은 데이터 URI에 # 문자 (예 : fill: #000 )를 사용하려면 이스케이프 처리해야합니다 ( fill: %23000 ).


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+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>

참고 : SVG에서 base64 항목은 fa-chevron-down 입니다.


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..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..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 쿼리 는이를 처리 할 수 ​​있습니다.

참고 문헌



CSS 및 HTML 전용 솔루션

Chrome, Firefox 및 IE11과 호환되는 것 같습니다. 그러나 다른 웹 브라우저에 대한 귀하의 의견을 남겨주십시오.

@Danield 대답에 의해 제안 된대로 예상 한 동작을 얻으려면 div (심지어 x-browser 호환성을위한 두 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>

2 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 hidding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;
    /* margin-top & margin-bottom must be set since some browser 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;
}

SELECT 태그를 스타일링하는 방법이 있습니다.

태그에 "크기"매개 변수가 있으면 거의 모든 CSS가 적용됩니다. 이 트릭을 사용하여 필자는 일반 선택 태그와 실질적으로 동일한 바이올린을 만들었으며 비주얼 언어로 ComboBox처럼 값을 수동으로 편집 할 수 있습니다 (입력 태그에 읽기 전용 을 넣지 않은 경우).

뒤에 오는 원리를보기위한 최소한의 예가 있습니다.
(클릭 메커니즘에 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 부분을 지적하기 전에 : 나는 "no javascript"라는 질문을 안다. 나에게, 이것은 플러그인과 함께 귀찮게하지 말아라. 나는 그들이 그것을 할 수 있다는 것을 안다 . 그러나 나는 네이티브 방식이 필요하다 . 이해, 아니 플러그인, 여분의 스크립트가 포함 된 태그 내부에 맞는 "onclick". 유일한 "document.parentNode.getElementsByTagName"광기를 피하기 위해 jQuery 만 종속됩니다. 하지만 그렇게 할 수 있습니다. 네, 네이티브 스타일과 일부 onclick 핸들러가있는 기본 선택 태그입니다. 분명히 "자바 스크립트 솔루션"이 아닙니다.

즐겨!


Danield의 답변 ( https://.com/a/13968900/280972 ) 의 두 번째 방법은 마우스 오버 효과 및 기타 마우스 이벤트와 함께 작동하도록 향상시킬 수 있습니다. 마크 업의 select 요소 바로 뒤에 "button"요소가 있어야합니다. 그런 다음 + css-selector를 사용하여 타겟팅하십시오.

HTML :

<select class="select-input">...</select>
<div class="select-button"></div>

CSS :

.select-input:hover+.select-button {
    [hover styles here]
}

그러나 이것은 "버튼"뿐만 아니라 선택 요소 위로 마우스를 가져 가면 호버 효과를 나타냅니다.

Angular와 결합하여이 방법을 사용하고 있습니다. (필자의 프로젝트는 어쨌든 Angular-app이기 때문에) 전체 select 요소를 다루기 위해 Angular가 "button"요소에서 선택한 옵션의 텍스트를 표시하도록합니다. 이 경우 선택 영역 위로 아무 곳이나 가져갈 때 호버 효과가 적용된다는 것이 적절합니다. 그래도 javascript가 없으면 작동하지 않으므로이 작업을 수행하고 사이트가 javascript없이 작동해야하는 경우 스크립트에서 향상에 필요한 요소와 클래스를 추가해야합니다. 그렇게하면 javascript가없는 브라우저는 올바르게 업데이트되지 않는 스타일이 적용된 배지 대신 일반 스타일의 스타일이 지정되지 않은 셀렉트를 선택하게됩니다.


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;
}

선택한 요소에 배경색을 사용하고 이미지를 제거했습니다.





skinning