【html/CSS】チェックボックス、ラジオボタンを非表示にする方法

「↓チェックボックスの□を消したい！」

「↓ラジオボタンの○を消したい！」

チェックボックスをクリックの判定につかったり、オリジナルのデザインのチェックボックスを作るとき、元のチェックボックスを消したくなりますよね。

inputのチェックボックス、ラジオボタンを非表示にする方法を解説します。

【結論】inputにdisplay:none

inputにdisplay:noneを指定するとチェックボックスの四角が消えます。

<style>
.example{
    display: none;
}
</style>
<input type="checkbox" class="example" id="2">
<label for="2">チェックボックス</label>

「display:none」は要素を消すCSSです。input以外にも使えます。

displayについて詳しくはこちら↓

checkedは機能する

「display:none」を指定してもhtmlはちゃんと残っているため、inputにcheckedがついたか判別できます。

下記はクリックすると文字色が変わります。

<style>
.example2{
    display: none;
}
.example2:checked+label{
    color: red;
}
</style>
<input type="checkbox" class="example2" id="3">
<label for="3">チェックボックス</label>

input自体は消えてクリックできないため、inputとlabelを結び付けてlabelをクリックしたらinputにcheckedが付くようにします。

「:checked+label」でクリックの判定ができるので、あとはlabelをデザインしていきましょう。

【まとめ】チェックボックス、ラジオボタンを非表示にする方法

inputにdisplay:noneを指定する

※checkedは機能する

以上、チェックボックス、ラジオボタンを非表示にする方法でした。