擬似要素の使い方を把握してコンタクトフォームの苦手を克服する

LPページのコンタクトフォームの作成が苦手

プログラミング（主にWEB系のマークアップ言語）の学習を開始して２ヶ月ちょい
LPページの作成を何回か経験しましたが必ず手が止まり困る箇所が...

そうコンタクトフォームが苦手です。

主にラジオボタンとチェックボックスを自由な装飾に変えるやり方が分からず何度もつまづいたので
調べて気に入ったやり方をコピペ用にログ的に残しておきます。

ラジオボタンの装飾

基本のHTML

index.html

  <label>
    <input type="radio" class="radio" name="radio"> <!--nameを揃えるとオンオフを切り替えられる-->
    <span>radio 1</span> <!--label内にspanで文字を入れると文字をクリックした時もラジオボタンが操作される-->
  </label>
  <label>
    <input type="radio" class="radio" name="radio">
    <span>radio 2</span>
  </label>
  <label>
    <input type="radio" class="radio" name="radio">
    <span>radio 3</span>
  </label>

CSSでdisplayプロパティをnoneに設定してデフォルトのラジオボタンを非表示にする。
そのあとspanに対するbeforeで空のラジオボタンを
　　　　　　　　　 afterでクリック時のプロットを作成する。
この時spanのpositionプロパティをrelativeにしておいてbeforeとafterの位置を操作する。

style.css

/*デフォルトのラジオボタンを消す*/
.radio{
  display: none;
}
/*radioクラスに隣り合っているspanへのCSS*/
.radio + span{
  position: relative;
  margin-left: 40px;
}
/*radioクラスに隣り合っているspanの擬似要素before*/
/*空のラジオボタン*/
.radio + span::before{
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid #333;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -15px;
}
/*radioクラスに隣り合っているspanの擬似要素after*/
/*クリック時のプロット*/
.radio + span::after{
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #aaa;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -11px;
}

afterは普段は消しておいて、クリックされたところのみ表示されるようにしたい。

style.css

.radio + span::after{
  opacity: 0; /*通常時は表示しない*/
}
/*checked(クリック)されたradioに隣接するspanの擬似要素afterへのCSS*/
.radio:checked + span::after{
  opacity: 1;
}

これで大きさや色を変えれば簡単にカスタマイズ可能です。

チェックボックスの装飾

基本のHTML

index.html

  <label>
    <input type="checkbox" class="check">
    <span>checkbox 1</span>　<!--label内にspanで文字を入れると文字をクリックした時もチェックボックスが操作される-->
  </label>
  <label>
    <input type="checkbox" class="check">
    <span>checkbox 2</span>
  </label>
  <label>
    <input type="checkbox" class="check">
    <span>checkbox 3</span>
  </label>

CSSでdisplayプロパティをnoneに設定してデフォルトのチェックボックスを非表示にする。
そのあとspanに対するbeforeで空のチェックボックスを
　　　　　　　　　 afterでクリック時のチェックマークを作成する。
この時spanのpositionプロパティをrelativeにしておいてbeforeとafterの位置を操作する。

style.css

/*デフォルトのチェックボックスを消す*/
.check{
  display: none;
}
/*checkクラスに隣り合っているspanへのCSS*/
.check + span{
  position: relative;
  margin-left: 40px;
}
/*checkクラスに隣り合っているspanの擬似要素before*/
/*空のチェックボックス*/
.check + span::before{
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid #333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -25px;
}
/*checkクラスに隣り合っているspanの擬似要素after*/
/*クリック時のチェックマーク*/
.check + span::after{
  display: block;
  content: "";
  width: 10px;
  height: 15px;
  border-bottom: 2px solid #aaa;
  border-right: 2px solid #aaa;
  position: absolute;
  top: -2px;
  left: -20px;
  transform: rotate(45deg);
}

afterは普段は消しておいてクリック時のみ表示させたい。

style.css

.check + span::after{
  opacity: 0; /*通常時は表示しない*/
}
/*checked(クリック)されたcheckに隣接するspanの擬似要素afterへのCSS*/
.check:checked + span::after{
  opacity: 1;
}

こちらも同様に大きさや色を変えれば簡単にカスタマイズ可能。

擬似要素に対するhoverやactiveでより動きのある装飾を

.radio:checked + span::after
でわかるように
別の要素にアクションを取った際の擬似要素のCSSを指定可能。
ということで
hoverやactive時の擬似要素を操作することが可能。

style.css

/*ラジオボタンにhoverした時の空のラジオボタンのCSS*/
.radio:hover + span::before{
  box-shadow: 0 0 5px 0 #aaa;
}
/*ラジオボタンをクリックした時の空のラジオボタンのCSS*/
.radio:active + span::before{
  background-color: #aaa;
}

これもLPのキーカラーなどに応じて変更可能。

おさらい

・隣接セレクタは汎用性が高いので使い方をしっかり理解しておく
・擬似要素のhoverやactiveの操作方法を把握しておく
ラジオボタンやチェックボックスへの苦手意識を克服しよう！