양식에 대한 사용자 지정 선택

안녕하세요 여러분, 이제 맞춤 양식 선택/드롭다운을 만들고 싶습니다.

html로 시작하자

<div class="wrapper">

  <label for="country">Country</label>
  <select name="country" id="country"> 
    <option value="US">United States</option>
    <option value="UK">United Kingdom</option>
    <option value="ID">Indonesia</option>
    <option value="SG">Singapore</option>
    <option value="MY">Malaysia</option>
  </select>

</div>

결과:


이제 드롭다운에 스타일을 지정해 보겠습니다.

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;700&display=swap');

* { box-sizing: border-box; }

body, html {
  padding: 0;
  margin: 0;
  font-family: 'Nunito', sans-serif;
  color: #181820;
  height: 100%;
}

.wrapper {
  height: 100%;
  padding: 2em;
  display: grid;
  place-content: center;
}

위의 스타일은 글꼴을 Nunito로 설정하고 아래 이미지와 같이 요소를 페이지 중앙에 배치합니다.


먼저 레이블의 스타일을 지정해 보겠습니다.

label {
  margin-top: 1.5em;
  margin-bottom: .5em;
  font-weight: bold;
  font-size: 1.2em;
}

위의 코드에서 레이블은 font-size 1.2em 및 font-weight bold 와 함께 상단과 하단에 공백이 있습니다.

결과:


이제 드롭다운/선택에 스타일을 부여합니다.

select {
  padding: 1em;
  width: 130%;
  border-radius: .2em;
  border: 1px solid #acacac;
  color: #181820;
}

결과:


보시다시피 드롭다운에 패딩을 1em만큼 추가한 후 오른쪽에 공백이 정확히 없습니다.
이 문제를 해결하려면 드롭다운을 사용자 지정해야 합니다.

먼저 선택의 모양을 없음에 추가해야 합니다.

select {
  /* previous css code*/

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

결과:


둘째, background가 있는 no-repeat로 이미지의 드롭다운 아이콘을 추가하고 size 주위에 14px-18px를 설정합니다. 또한 position를 right 정렬로 설정하고 origin를 기반으로 content-box를 설정합니다.

select {
  /* previous css code*/

  background: url('https://cdn1.iconfinder.com/data/icons/arrows-vol-1-4/24/dropdown_arrow-512.png');
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: right;
  background-origin: content-box;
}

전체 코드


그게 다야. 당신이 그것을 즐겼기를 바랍니다.
즐거운 코딩하세요! :)