ホームへ

【html/CSS】inputのcheckboxを消す/非表示にする方法

2022年07月28日

「↓チェックボックスの四角を消したい!」

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

inputのcheckboxを消す/非表示にする方法を解説します。

【結論】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について詳しくはこちら↓

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

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をデザインしていきましょう。

【まとめ】checkboxを消す方法

inputにdisplay:noneを指定する

※checkedは機能する

以上、inputのcheckboxを消す/非表示にする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ