appearance

Front-end/CSS

by 본투비곰손 2023. 6. 12. 21:59

728x90

appearance

브라우저가 가지고 있는 고유의 button또는 select의 arrow 모양을 없애거나 변형 할 때 사용한다.

여러가지 속성이 있지만 모든 브라우저에 동일한 화면을 구현하기 위해 appearance : none 속성을 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .appearance-auto{
      appearance: auto;
    }
    .appearance-none{
      appearance: none;
    }
</style>
</head>
<body>
  <select class="appearance-auto">
    <option value="1">선택사항1</option>
    <option value="2">선택사항2</option>
    <option value="3">선택사항3</option>
    <option value="4">선택사항4</option>
    <option value="5">선택사항5</option>
  </select>
  <select class="appearance-none">
    <option value="1">선택사항1</option>
    <option value="2">선택사항2</option>
    <option value="3">선택사항3</option>
    <option value="4">선택사항4</option>
    <option value="5">선택사항5</option>
  </select>
  <button class="appearance-auto" type="button">123</button>
  <button class="appearance-none"type="button">123</button>
  
  <input class="appearance-auto" type="text" placeholder="스토어 검색" />
  <input class="appearance-none" type="text" placeholder="스토어 검색" />

  
</body>
</html>

appearance : none 속성을 이용하여 화살표를 이미지나 아이콘으로 변경하여 꾸며준다.

728x90

'Front-end > CSS' 카테고리의 다른 글

position : sticky (0)	2023.06.14
pointer-event (0)	2023.06.14
말줄임표 (영역에서 텍스트넘칠때 ...으로 줄이기) (0)	2023.06.12
white-sapce (0)	2023.06.12
object-fit (0)	2023.06.12