はじめに
チェックボックスをCSSでカスタマイズする方法は他のいろんな記事にまとめられていましたが、
よく書かれていたのはラベルつきのチェックボックスのカスタマイズする方法でした。
そこでこの記事では、ラベルのないチェックボックスのみをカスタマイズする方法をまとめましたので、どなたかの参考になればなと思います。
ラベルなしのチェックボックスをカスタマイズする方法
before
after
サンプルコード
擬似要素（:after）を使って、擬似要素にCSSを適用するイメージです。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
input[type='checkbox']:after{
line-height: 1.5em;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-top: -4px;
margin-left: -4px;
border: 1px solid rgb(192,192,192);
border-radius: 0.25em;
background: rgb(224,224,224);
}
input[type='checkbox']:checked:after {
width: 15px;
height: 15px;
border: 3px solid #00ff00;
}
</style>
<title>click test</title>
</head>
<body>
<table border="1">
<tr>
<th></th>
<th>名前</th>
<th>年齢</th>
</tr>
<tr class='box'>
<td class='pointer'><input type="checkbox" id="test_1"></td>
<td>田中</td>
<td>27</td>
</tr>
<tr class='box'>
<td class='pointer'><input type="checkbox" id="test_2"></td>
<td>佐藤</td>
<td>42</td>
</tr>
</table>
</body>
</html>
参考
- Styling a checkbox without the label tag