<html> <head> <style> label.check { box-sizing: border-box; position: relative; vertical-align: middle; } label.check>input[type='checkbox']{ display:none; appearance: none; } label.check>span:before{ display: inline-block; width: 16px; height: 16px; position: relative;; top: 2px; left: 0; content: ''; margin : 0 0.5rem 0 0; border:1px solid #ccc; } label.check>input[type='checkbox']:checked + span:after { display: inline-block; width: 6px; height: 12px; position: absolute; top: 0px; left: 5px; content: ''; margin: 0 0.5rem 0 0; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(45deg); } </style> </head> <body> <label class="check"><input type="checkbox" name="item1" value="1"><span>アイテム1</span></label> <label class="check"><input type="checkbox" name="item2" value="2"><span>アイテム2</span></label> </body> </html>