CSS에서 스타일 선택 드롭다운

1. appearance:none을 사용하여 기본 화살표를 숨기고 CSS의 선택 드롭다운에서 사용자 지정 화살표 설정
2. overflow:hidden을 사용하여 CSS의 선택 드롭다운에서 기본 화살표를 숨기고 사용자 지정 화살표를 설정합니다

이 기사에서는 CSS에서 선택 드롭다운 메뉴의 스타일을 지정하는 몇 가지 방법을 소개합니다.

appearance:none을 사용하여 기본 화살표를 숨기고 CSS의 선택 드롭다운에서 사용자 지정 화살표 설정

기본 화살표 세트를 숨기고 사용자 정의 화살표 세트를 추가하여 CSS만 사용하여 선택 드롭다운 메뉴의 스타일을 지정할 수 있습니다. 운영 체제를 기반으로 요소의 스타일을 정의하는 CSS 속성 appearance가 있습니다. appearance 속성으로 적용된 스타일은 플랫폼 기반이 됩니다. select 태그에서 이 속성을 사용하고 드롭다운 메뉴에서 화살표를 정의할 수 있습니다. appearance 속성의 none 옵션은 드롭다운에서 기본 화살표를 숨깁니다. 그런 다음 사용자 정의 화살표를 업로드할 수 있습니다. WebKit 기반 및 Blink 기반 브라우저에서 -webkit-appearance 및 -moz-appearance 속성을 사용할 수 있습니다.

예를 들어 HTML에서 select 및 option 태그를 사용하여 드롭다운 목록을 만듭니다. 원하는 옵션을 작성하십시오. CSS에서 select 태그를 선택하고 margin, width, height, padding, font-size, border와 같은 다양한 속성을 설정합니다. 다음으로 appearance 속성을 사용하고 none으로 설정합니다. 그런 다음 background 단축 속성을 사용하여 사용자 지정 화살표를 설정합니다. url() 함수를 사용하여 이미지를 선택합니다. background-repeat, background-size 및 background-color와 같은 속성으로 이미지의 스타일을 지정합니다. no-repeat 옵션을 사용하여 이미지를 한 번 표시합니다. 위치를 100%로 설정하고 background-size를 15%로 설정합니다.

따라서 CSS를 사용하여 드롭다운 메뉴의 스타일을 지정했습니다.

예제 코드:

<select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
</select>

select {
 margin: 40px;
 width: 160px;
 padding: 4px 30px 4px 4px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 30px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}

overflow:hidden을 사용하여 CSS의 선택 드롭다운에서 기본 화살표를 숨기고 사용자 지정 화살표를 설정합니다

select 태그를 div로 래핑하고 overflow를 hidden으로 설정하여 드롭다운 메뉴에서 기본 화살표를 숨길 수 있습니다. 그런 다음 첫 번째 방법과 동일한 사용자 지정 화살표를 추가할 수 있습니다. overflow 속성을 hidden으로 설정하면 컨테이너에서 오버플로가 잘립니다. 나머지 내용은 숨겨집니다. 드롭다운 메뉴보다 작은 div의 너비를 정의합니다. 따라서 overflow 속성에서 hidden 값을 사용할 때 드롭다운 메뉴의 화살표가 컨테이너 외부로 떨어집니다. 마지막으로 사용자 정의 화살표를 추가할 수 있습니다.

예를 들어 menu 클래스로 div를 생성합니다. div 안에 첫 번째 방법과 동일한 드롭다운 항목을 작성합니다. CSS에서 menu 클래스의 자손인 select 태그를 .menu select로 선택하고 스타일을 적용합니다. 배경을 투명으로 설정하십시오. 140px의 width를 만듭니다. font-size를 14px로 설정하고 테두리를 만듭니다. 메뉴의 높이를 35px로 설정합니다. 다음으로 menu 클래스를 선택하고 40px의 여백, 125px의 너비, 34px의 높이를 지정합니다. 컨테이너의 너비가 메뉴보다 작은지 확인하십시오. 다음으로 overflow를 hidden으로 설정하고 배경 이미지를 첫 번째 방법으로 설정합니다.

여기에서 드롭다운 메뉴의 기본 화살표를 제거하고 사용자 지정 화살표를 추가했습니다. 따라서 CSS에서 선택 드롭다운 메뉴의 스타일을 지정할 수 있습니다.

예제 코드:

<div class="menu">
 <select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
 </select>
</div>

.menu select {
 background: transparent;
 width: 140px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 35px; 
} 
.menu{
 margin: 40px;
 width: 125px;
 height: 34px;
 border: 1px solid black;
 overflow: hidden;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}