画像のような切り替えスイッチをHTMLとCSSだけで作ります。 デモ コード html <div class="switch"> <input id="switch" checked type="checkbox"> <label for="switch"></label> </div> CSS .switch input { display: none; } .switch label { padding: 12px; font-size: 16px; font-weight: bold; cursor: pointer; } .switch label:before { padding: 6px 10px; content: 'O N'; border-radius: 6px 0 0 6px; background: linear-gradient(to bottom, #F0F0F0