<h1>&lt;button&gt; 요소와 &lt;label&gt; 요소의 커서는 어떤 형태이어야 하는가?</h1>
<button type="button" class="btn">버튼</button>
<br>
<br>
<input type="checkbox" id="check1"><label for="check1">레이블1</label>
<input type="checkbox" id="check2"><label for="check2">레이블2</label>
<input type="checkbox" id="check3"><label for="check3">레이블3</label>
<p>버튼과 레이블의 커서 모양을 표준에 따라 기본값 {cursor:default} 으로 처리했지만 시각적으로 클릭할 수 있다는 단서를 충분히 제공할 수 있다.</p>
h1{font-size:20px;}
button{
  width: 120px;
  height: 40px;
  background: #767676;
  color: #fff;
  border: 0;
  border-radius: 3px;
}
button:hover,
button:focus{
  background: #222;
  box-shadow: 0 0 5px blue;
}
input{position:relative;}
[type=checkbox]+label{
  display:inline-block;
  padding: 2px 4px 2px 20px;
  margin: 0 8px 0 -20px;
  border-radius: 2px;
}

[type=checkbox]+label:hover,
[type=checkbox]:focus+label{
  background: #ddd;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.