<select> 기본 스타일 없애고 내가 원하는 스타일 넣기

 

 

 

 

HTML

<form class="form-container">
        <label>Pick a Movie: </label>
        <select id="movie-select">
			<option value="12">Parasite</option>
			<option value="10">Bando</option>
			<option value="9">Avengers: Endgame</option>
			<option value="8">Harry Potter</option>
        </select>
</form>

 

 

 

 

CSS

.form-container select {
  background: #fff;
  padding: 0.4rem;
  margin: 0 0.2rem;
  border: 0;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.form-container select:focus {
  outline: 0;
}

appearance:none을 해주면 아래로 향하는 화살표가 사라진다.

 

 

 

:focus selector를 사용해서

<select>를 사용자가 누른 후 생기는 outline을 없애준다.