WebKit의 CSS에서 <select> 및 : after 문제 같습니다. <select name=””> <option value=””>Test</option> </select> 그리고

의사 : after (2 부분과 이미지없이 선택 상자의 스타일을 지정하기 위해)를 사용하여 선택 상자에 스타일을 추가하고 싶습니다. HTML은 다음과 같습니다.

<select name="">
  <option value="">Test</option>
</select>

그리고 그것은 작동하지 않습니다. 이유를 모르겠고 W3C 사양에서 답을 찾지 못했습니다. CSS는 다음과 같습니다.

select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select:after {
  content: " ";
  display: inline-block;
  width: 24px; height: 24px;
  background: blue;
}

그래서 정상입니까, 아니면 트릭이 있습니까?

답변

나는 이것을 광범위하게 확인하지 않았지만 select브라우저 자체가 아니라 브라우저가 실행되는 OS에서 요소가 생성되는 방식으로 인해 (아직?) 불가능하다는 인상을 받았습니다.

답변

내 선택의 배경이 화살표 색상과 동일하기 때문에 같은 것을 찾고있었습니다. 앞서 언급했듯이 select 요소에서 : before 또는 : after를 사용하여 아무것도 추가하는 것은 아직 불가능합니다. 내 해결책은 코드 앞에 다음을 추가 한 래퍼 요소를 만드는 것이 었습니다.

.select-wrapper {
    position: relative;
}

.select-wrapper:before {
    content: '\f0d7';
    font-family: FontAwesome;
    color: #fff;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 15px;
    pointer-events: none;
}

그리고 이것은 내 선택

select {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select::-ms-expand {
    display: none;
}

새 화살표에 FontAwesome.io를 사용했지만 원하는 다른 것을 사용할 수 있습니다. 분명히 이것은 완벽한 솔루션은 아니지만 필요에 따라 충분할 수 있습니다.

답변

내 경험에 따르면 <select>랩퍼 로 포장하지 않는 한 작동하지 않습니다 . 그러나 대신 할 수있는 것은 배경 이미지 SVG를 사용하는 것입니다. 예

    .archive .options select.opt {
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-right: 1.25EM;
    appearance: none;
    position: relative;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.5EM 1EM;
    background-position: right center;
    background-clip: border-box;
    -moz-background-clip: border-box;
    -webkit-background-clip: border-box;
}

    .archive .options select.opt::-ms-expand {
        display: none;
    }

IE 때문에 적절한 URL 인코딩에주의하십시오. 당신은 사용해야합니다 charset=utf8(다만 utf8당신의 인생을 단순화하는 대신를 단락 SVG 속성 값, 사용 아포스트로피 ( ‘)를 큰 따옴표 ( “)를 사용하지 마십시오). URL 인코딩의 (%의 3E).에서 케이스를 인쇄 havee UTF-8 표현 (예 : BabelMap이 도움이 될 수 있음)을 얻어야하는 비 ASCII 문자는 URL 인코딩 형식으로 제공해야합니다. 예를 들어 ▾ ( U+25BE검은 색 아래쪽을 가리키는 작은 삼각형) UTF-8 표현은 다음과 같습니다. \xE2\x96\xBE이는 %E2%96%BEURL 인코딩 된 경우.

답변

이 게시물은 http://bavotasan.com/2011/style-select-box-using-only-css/에 도움이 될 수 있습니다.

그는이 문제를 해결하기 위해 클래스와 함께 외부 div를 사용하고 있습니다.

<div class="styled-select">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
  </select>
</div>

답변

같은 문제에 직면했습니다. 아마도 해결책이 될 수 있습니다.

<select id="select-1">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
<label for="select-1"></label>

#select-1 {
    ...
}

#select-1 + label:after {
    ...
}

답변

이 솔루션은 sroy의 솔루션과 유사하지만 웹 글꼴 대신 CSS 삼각형을 사용합니다.

.select-wrapper {
  position: relative;
  width: 200px;
}
.select-wrapper:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #666;
  position: absolute;
  right: 8px;
  top: 8px;
  pointer-events: none;
}
select {
  background: #eee;
  border: 0 !important;
  border-radius: 0;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  text-indent: 0.01px;
  text-overflow: "";
  font-size: inherit;
  line-height: inherit;
  width: 100%;
}
select::-ms-expand {
  display: none;
}
<div class="select-wrapper">
  <select>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
  </select>
</div>

스 니펫 확장

답변

마크 업 수정이 옵션이 아닌 경우 어떻게합니까?

다음은 래퍼에 대한 요구 사항이없는 솔루션입니다. 배경 이미지에 SVG를 사용합니다. 채우기 색상을 변경하는 방법을 이해 하려면 HTML 엔티티 디코더 를 사용해야 할 수 있습니다 .

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

background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;

CSS-Tricks 에서 핀치 .