HTMLとCSSでチェックボックスの色と形をカスタムデザインする方法を現役デザイナーが解説【初心者向け】

チェックボックスのデフォルト表示を見てみよう まず、チェックボックスのデフォルト表示を見てみましょう。コードはこのようになります。 <input type="checkbox" />ここをチェックするよ これが基本的なチェックボックスのHTMLコードとなります。 HTMLとCSSでチェックボックスの色と形を変える方法 チェックボックスの色や形を変えたい場合はデフォルトのチェックボックスを非表示にし、疑似要素であるbeforeとafterを使うのが一般的ですが、inputタグには疑似要素が使えません。なので、labelタグにfor要素を使い、 <input type="checkbox" id="check1"> <label for="check1">ここをチェックするよ</label> cssは input#check1[type="checkbox"]+label{ /*ここにcssを