はじめに
チェックボックスを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