CSS의 선택 입력 필드에 위/아래 화살표를 모두 만드는 방법은 무엇입니까?

CSS의 선택 입력 필드에 위/아래 화살표를 모두 만드는 방법은 무엇입니까?

CSS의 선택 입력란에 위/아래 화살표를 추가하고 싶은 웹사이트(Wordpress, 커스텀 테마)를 만들고 있습니다.선택 입력 필드의 위/아래 화살표를 작성하기 위해 사용하는 HTML 코드는 다음과 같습니다.

<p>
   <select name="filter_31" id="search-box-filter_31">
      <option value="Vancouver Island University">University of A</option>
      <option value="Western University">University of B</option>
      <option value="Wilfrid Laurier University">University of C</option>
      <option value="York University">University of D</option>
   </select>
</p>

위 코드의 완전한 fielen https://jsfiddle.net/ovp8Lxjw/4/embedded/result 입니다.현재 아래 화살표만 표시되어 있습니다.

위 바이올린에는 파란색 위 화살표와 아래 화살표를 모두 추가하고 싶습니다.이 시점에서는 아래 화살표만 표시됩니다.

문제 설명:

css의 select input 필드에 위/아래 화살표(아래 스크린샷과 같이 화살표 표시)를 표시하기 위해 위의 항목에 어떤 CSS 코드를 추가해야 하는지 궁금합니다.HTML 코드는 워드프레스 사이트에서 검사하고 있기 때문에 변경할 수 없습니다.

기본 선택 화살표 아이콘은 브라우저에 의해 그려집니다.브라우저에 화살표 아이콘을 대체하도록 지시하는 API는 없으므로 선택 요소를 다시 정렬하고 자신의 화살표를 오버레이해야 합니다.브라우저의 화살표와 동일한 유형의 화살표를 그릴 수 있지만 기본 아이콘은 다른 브라우저 및 운영 체제에 따라 다릅니다.

항목을 모두 으로 해야 .p에는 ID를 대상으로 .p입력한 코드만으로는 요소가 쉽지 않습니다., 제공된 Wordpress Wordpress 바로 .p의 , <label for="search-box-filter_31">Name of Institution</label> .,,는p 셀렉터 CSS를 사용하여 으로 할 수 .label[for=search-box-filter_31] + p.

먼저 새 화살표를 넣을 공간이 충분한지 확인해야 합니다.은 선택 부모 의 너비에 .p을 사용하다 중 하나는 '선택 폭'을 사용하는 입니다.calc(100% + 30px)새 화살표가 기본 아이콘과 같은 너비일 경우 이 작업을 수행할 필요가 없을 수 있지만 구성에 따라 화살표가 선택한 내용과 겹칠 수 있습니다.

가가 additionp요소는 내용에 맞게 축소되어야 합니다., 깰입니다.display: table.

'마지막으로'를 할 수 .::after p원하는 화살표를 만들고 기본 화살표를 숨긴 채 선택한 요소의 끝에 겹칩니다.다음 예제에서는 인라인 SVG를 사용하여 화살표를 생성했지만 상황에 가장 적합한 배경 이미지를 사용할 수 있습니다.를 합니다.::after를 갖는 position:absolute선택 항목 오른쪽 위에 정확히 맞게 스타일링합니다.이미지에 있는 화살표 아래에 파란색 그라데이션 배경을 작성하려면 첫 번째 배경이 화살표이고 두 번째 배경이 CSS 그라데이션인 여러 배경을 사용합니다.

「 」로, 주의해 .::after요소가 선택 항목 위에 있으면 화살표를 클릭해도 옵션이 표시되지 않습니다. 설정할 수 .pointer-events: none;IE를 사용하다

CSS는 다음과 같습니다.또는 코드 페이지 https://codepen.io/jla-/pen/ZqbWMj 에서 참조할 수 있습니다.

#search-box-filter_31 {
    width: calc(100% + 30px);
}
label[for=search-box-filter_31] + p {
    position: relative;
    display: table;
    border-radius: 5px;
    padding-right: 30px;
}
label[for=search-box-filter_31] + p::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 30px;
    border-radius: 0 5px 5px 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><polyline points='8,12,15,8,22,12' fill='none' style='stroke:white;stroke-width:2'/><polyline points='8,18,15,22,22,18' fill='none' style='stroke:white;stroke-width:2'/></svg>"),
        linear-gradient(to bottom, #a0d8ff 0%, #2591dd 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

결과(Linux의 Firefox에 표시되는 기본 선택)는 다음과 같습니다.

물론 화살표와 파란색 배경은 원하는 대로 스타일링할 수 있습니다.선택 화살표에 사용자 정의 스타일을 추가하면 기본 브라우저 스타일과 다르게 표시됩니다.하나의 브라우저에 심리스하게 들어가도록 스타일링을 할 수 있습니다.Chrome, 그러나 Firefox와 같은 다른 브라우저는 다르게 표시되며 사용자 지정 스타일이 일치하지 않습니다.모든 브라우저와 운영체제에서 매끄러운 외관을 유지하려면 모든 선택/입력 요소가 서로 일치하도록 스타일링되어 있는지 확인해야 합니다.

이것은 선택 상자의 배경 이미지로 base64 인코딩 Font Awesome 아이콘을 사용하는 간단하고 간단한 예입니다.

select {
  background-color: white;
  border: thin solid grey;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}
select.arrows {
  background-image:    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA3klEQVRIS+3VMU9CMRTF8d8zBL+aizoQFhx0kUk33RzdYMNFXUFnYeGrYYyaJiUxJHDLSxodbNKpfeffc9/pbaPyaCrr+3OA++z4rtT5Pg5GuMnCY9yWQEoBE1xhlUUP8YDrCBIB0vojLvGO0yz4hm4JJAKcYYoPHGOZAUdYoIMBXrc5iQAHeMlzviFygj7O8dkWEJU4XI8chALRhn9AVKHf70VRTHu4wFfbmKZLNKt50dLBnna0imcMd/2I0phWa3Y/D1e1Xa9BCZJG0VuQNpaWKMx72xS1Fl5/WN3BN+AgJhnZQlq4AAAAAElFTkSuQmCC');
  background-position: calc(100% - .5rem), 100% 0;
  background-size:  1.5em 1.5em;
  background-repeat: no-repeat;
}

select.arrows:focus {
  border-color: blue;
  outline: 0;
}

<p>
  <select class="arrows">
      <option value="Vancouver Island University">Vancouver Island University</option>
      <option value="Western University">Western University</option>
      <option value="Wilfrid Laurier University">Wilfrid Laurier University</option>
      <option value="York University">York University</option>
   </select>
</p>

jsFiddle에서 확인할 수 있습니다.

또한 아이콘의 png 이미지를 만들기 위해 사용되는 Icomoon App 링크입니다.

p 요소에서는 after: selector를 사용합니다.

p:after{
content: url("path/to/image");
} 

순수한 CSS/HTML 솔루션을 사용할 수 있지만, html 크기 = "2"로 높이를 확장한 후 높이를 다시 좁히면 해킹을 통해 작동합니다.

<p>
   <select name="filter_31" id="search-box-filter_31" size="2" style="font-size:16px; height:24px;">
      <option value="Vancouver Island University">University of Arizona</option>
      <option value="Western University">University of B</option>
      <option value="Wilfrid Laurier University">University of C</option>
      <option value="York University">University of D</option>
   </select>
</p>

그러나 작업 중인 프로젝트에서는 이러한 코드를 작성하지 않고 js 라이브러리를 사용하는 것이 좋습니다.예를 들어 https://github.hubspot.com/select/docs/welcome/

HTML을 만질 수 없다고 하니까 위안이 되는 것 같아요. CSS로 놀고 있었어요!

#search-box-filter_32 {
            background-color: white !important;
            font-size: 11px !important;
            background: url('https://cdn3.iconfinder.com/data/icons/trico-arrows-1/24/ExpandUpDownSmall-512.png') no-repeat right #ddd;
            background-position: 98%;
            padding: 2px 20px 2px 8px;
            padding-right: 20px;
            background-size: 14px;
            -moz-appearance: none;
            -o-appearance: none;
            -ms-appearance: none;
            -webkit-appearance: none;
            outline: none !important;
            -webkit-border-radius: 4px;
            border: 1px  solid #cccccc;
        }

https://codepen.io/mohan-wijesena/pen/dgMBLY

언급URL : https://stackoverflow.com/questions/52572821/how-to-make-both-up-down-arrow-in-select-input-field-in-css