はじめに
チェックボックスを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
会社紹介
株式会社 Mosaica
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。
詳しくは 公式サイト までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/