css) select 태그영역 넓히기 - select 버튼 꾸미기 / dropdown 버튼 svg로 변경 / pointer-events: none;

select 태그 기본 버튼을 없애고 svg를 이용해 화살표 버튼으로 변경했다.

select 태그 영역이 svg까지 포함되지 않아 이것 저것 하다가 해결했다.

width도 아니고 padding. margin 등도 html 구조를 div로 감싸서 변경하거나 하는것도 아니다.

 아주 간단하게  select가 태그 영역이 도달해야하는 이미지 css에

pointer-events: none; 

 

코드만 적으면 해결❗

[ html ]

      <!-- 검색 영역 -->
      <form action="#" class="search-form">
        <label for="search-item">
          <select name="search" id="search-item">
            <option value="">전체</option>
            <option value="clothes">의류</option>
            <option value="foods">식품</option>
            <option value="life">생활</option>
          </select>
        </label>
        <img src="./assets/icon/IconMoreDown.svg" alt="더보기화살표">
        <input class="search-input" type="text" placeholder="찾고 싶은 상품을 검색해 보세요!" />
        <button class="mic-btn" type="button"></button>
        <button class="keyword-btn" type="button"></button>
      </form>
      <!-- //검색 영역 -->

 

 

[ css ]

/* 검색 영역 */
.search-form {
  grid-area: search;
  width: 51.6rem;
  height: 4rem;
  display: flex;
  outline: 1px solid var(--color-blue-600);
  margin: 2.3rem 0rem 0rem 3rem;

  position: relative;

}

/* 셀렉트 */
.search-form select {
  outline: none;
  box-shadow: none;
  margin: 0;
  width: 13.5rem;
  border-right: 1px solid var(--color-gray-100);
  padding: 1.3rem 4.6rem 1.3rem 1.2rem;
  font-size: 12px;
}

.search-form img {
  position: absolute;
  top: 0px;
  left: 10rem;
  pointer-events: none;
}

.search-form input {
  padding: 0 123px 0 0;
  border: none;

  color: var(--color-gray-600);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%
}

 

 

 

 

---

참고로 

select 기본 화살표 없애는 css 코드를 첨부한다.

/*익스플로러 기본 화살표 없애기*/
select::-ms-expand {
  display: none;
}

/*화살표 기본 css 없애기*/
select {
  border-radius: 0;
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

 

 

 

 

 

 

참고

나