input type="checkbox"

実行結果

入力します。

"チェックボックス"の入力です。下の小さな四角の中をクリックしてください。
ここをチェック

色が変わってチェックマークが表示されます。トグルになっています。

小さくてわかりにくいですね。 input命令には幾つかの種類があります。

プログラム

入力用です。

HTML
"チェックボックス"の入力です。下の小さな四角の中をクリックしてください。
<input type="checkbox" id="input">ここをチェック

---

CSSは有りません。

手軽に使えます。

何か動かしてみましょう。

オレンジ色のボックスを小さくして消します。

実行結果

"チェックボックス"の入力です。 下の小さな四角の中をクリックしてください。
ここをチェック

マウスで操作するよりも簡単です。

プログラム

オレンジ色の長方形を描きます。

  HTML
  "チェックボックス"の入力です。
  下の小さな四角の中をクリックしてください。
 
  <input type="checkbox" id="input2">ここをチェック
  <div class="box"></div>

  /*CSS*/
  .box{
    width: 250px;
    height: 200px;
    background-color: #f88;
    transition: all 2s ease-in-out;
  }

  #input2:checked ~ .box{
  width: 0;
  height: 0;
  }