頼むよやめてよ。

例

  • 左端にチェックボックス
  • 行にマウスカーソルを持ってくると、
  • 行全体の背景色が変わる
  • カーソルが指アイコン pointer になる
  • チェックボックス以外をクリックしても何も起こらない

<h1>Bad UI Shopping List</h1>
<ul class="list">
  <li class="item">
    <input type="checkbox" checked>
    Milk
  </li>
  …
</ul>

.list {
  list-style-type: none;
  padding: 0;
}


.item {
  cursor: pointer;
  padding: 0.5em;

  &:hover {
    background-color: #eee;
  }
}

解決策

<label> 付けてください。

<h1>Bad UI Shopping List</h1>
<ul class="list">
  <li class="item">
    <label class="itemLabel">
      <input type="checkbox" checked>
      Milk
    </label>
  </li>
  …
</ul>

.list {
  list-style-type: none;
  padding: 0;
}


.itemLabel {
  cursor: pointer;
  display: block;
  padding: 0.5em;

  &:hover {
    background-color: #eee;
  }
}

そもそもリスト ul > li にする必要があるのか、みたいなのはまあ別途。

表とかで使えないなら JavaScript かなあ。

おしまい

何卒よろしくお願い申し上げます。