pointer-event

Front-end/CSS

by 본투비곰손 2023. 6. 14. 00:42

728x90

pointer-event

그래픽 (텍스트 )요소가 포인터 이벤트의 대상이 될 수 있는지 지정 하는 속성

일반적으로 auto , none 를 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .pointer-events-auto{
      cursor: pointer;
      pointer-events: auto;
    }
    .pointer-events-none{
      cursor: pointer;
      pointer-events: none;
    }
    
      </style>
</head>
<body>
  <select class="pointer-events-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="pointer-events-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="pointer-events-auto" type="button">123</button>
  <button class="pointer-events-none"type="button">123</button>
</body>
</html>

동일한 html이지만 pointer-events : none를 주면 아무 기능을 하지 않는다.

주로 appearance : none 로 브라우저의 폼 기본요소를 지우고 디자인한 요소를 넣어 사용 할때 해당 요소가 클릭에

지장을 주지 않게 하기 위해서 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .pointer-events-auto{
      cursor: pointer;
      pointer-events: auto;
    }
    .pointer-events-none{
      padding-right: 15px;
      cursor: pointer;
      appearance: none;
    }
    .box {
      display: inline-flex;
      position: relative;
    }
    .icon-1 {
      position: absolute;
      top: 0;
      right: 0;
      pointer-events: auto;
    }
    .icon-2 {
      position: absolute;
      top: 0;
      right: 0;
      pointer-events: none;
    }
</style>
</head>
<body>
  <div class="box">
    <select class="pointer-events-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>
    <div class="icon-1">**</div>
  </div>
  <div class="box">
    <select class="pointer-events-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>
    <div class="icon-2">**</div>
  </div>
</body>
</html>

기본 화살표를 appearance:none로 지우고 임의로 만든 icon을 삽입 후 pointer-events 속성 확인

728x90

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

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