ホーム > ブログ > コーディングTips > cssだけでinputデザインあれこれ

cssだけでinputデザインあれこれ

2015.04.09

inputのチェックボックスやラジオボタンってデフォだとダサいですよね?しかも装飾しにくい…。
そこで先日cssだけでラジオボタン、チェックボック作ったのでその作り方をまとめます。

input自体は使わず、labelを利用してラジオボタンを作る

<input>のidと<label>のforがおなじのものはセットとなっていて<label>をクリックしてもチェックが入ります。

  1. <input type="radio" id="radio"><label for="radio">レーベル</label>

<label>のbefore、afterを利用してラジオボタンを作ります。
labelとセットで使うのでhtmlソースはこんな感じ。 

  1. <div id="radio">
  2. <input id="radio01" type="radio"><label for="radio01">かつおぶし</label>
  3. <input id="radio02" type="radio"><label for="radio02">チーズ</label>
  4. <input id="radio03" type="radio"><label for="radio03">牛乳</label>
  5. </div>

labelを利用してラジオボタンを作る

beforeでボタンの外側を作ります。 
チェックしたときに現れるボタンはafterで作ります。before、afterともにabsoluteで位置を固定して重ねます。

  1. #radio input{
  2. display:none;
  3. }
  4. #radio label{
  5. display:inline-block;
  6. position:relative;
  7. padding-left:25px;
  8.  
  9. }
  10. #radio label:before,#radio label:after{
  11. content:'';
  12. display:block;
  13. position:absolute;
  14. top:0;
  15. left:0;
  16. width:15px;
  17. height:15px;
  18. border-radius:50%;
  19. }
  20. #radio label:before{
  21. background:#fafafa;
  22. border:1px solid #666666;
  23. }

隣接セレクタを利用してinputがチェックされたときにlabelのスタイルを変えます。

隣接セレクタ (E + F)とは?

隣接セレクタは、要素と要素が直接隣接している場合(直後の弟)に適用されるセレクタです。このため、要素と要素の間に別の要素が有る場合は対象になりません。
親要素が同じになる要素の事を兄弟といい、先に書かれているのが兄になり後に書かれているのは弟になります。間に別の要素が入っている場合も弟である事に変わり有りませんがその場合は「直後の弟」にはなりません。このような兄弟関係から、隣接兄弟セレクタとも呼ばれます。

参考:css HappyLife

 

  1. #radio input:checked + label:after{
  2. top:3px;
  3. left:3px;
  4. height:11px;
  5. width:11px;
  6. background:#E71063;
  7.  
  8. }

radioボタンなので一度チェックしたらreloadしないと変わりませんが、こんな感じです。

同じ要領でチェックボックスも作ってみる

同じ要領でチェックボックスを作ります。

  1. <div id="checkbox">
  2. <input id="check01" type="checkbox"><label for="check01">銀ねこ</label>
  3. <input id="check02" type="checkbox"><label for="check02">くろねこ</label>
  4. <input id="check03" type="checkbox"><label for="check03">しゃむねこ</label>
  5. </div>

チェックのマークはFont-awesomeのようなWebフォントでもいいと思います。今回はせっかくなのでborderとtransformの回転を利用して作ってみました。

  1. #checkbox input:checked + label:after{
  2. top:3px;
  3. height:7px;
  4. border-left: 3px solid #E71063;
  5. border-bottom: 2px solid #E71063;
  6. -webkit-transform: rotate(-45deg);
  7. -ms-transform: rotate(-45deg);
  8. transform: rotate(-45deg);
  9. }

ハンバーガメニューのボタンを作ってみる

同じ要領でチェックボックスを利用してアニメーションするハンバーガメニューを作ります。

  1. <input id="menu_btn" type="checkbox"><label for="menu_btn" class="menu_btn"></label>

真ん中のボーダーはボックスシャドウで追加します。
チェックが入った時transformで回転させて×に変えます。

  1. #menu_btn{
  2. display:none;
  3. }
  4. .menu_btn{
  5. display: block;
  6. height: 24px;
  7. position: relative;
  8. width: 24px;
  9. margin-right: 3%;
  10. }
  11. .menu_btn::before,
  12. .menu_btn::after{
  13. width:24px;
  14. position:absolute;
  15. display: block;
  16. right:0;
  17. content:'';
  18. background:#000000;
  19. transition:0.3s ease;
  20. }
  21. .menu_btn::before{
  22. top:0;
  23. position:absolute;
  24. content:'';
  25. box-shadow: #000000 0 10px 0;
  26. height: 4px;
  27. }
  28. .menu_btn::after{
  29. position:absolute;
  30. bottom:0;
  31. right:0;
  32. content:'';
  33. height: 4px;
  34. }
  35. #menu_btn:checked + *:before{
  36. box-shadow:none;
  37. -webkit-transform: rotate(45deg);
  38. transform: rotate(45deg) translate3d(10px, 4px, 0);
  39. }
  40. #menu_btn:checked + *:after{
  41. -webkit-transform: rotate(-45deg);
  42. transform: rotate(-45deg) translate3d(10px, -4px, 0);
  43. }

さらにcssのみで開閉するアコーディオンメニューも作れますが続きは次回書きます~。

まとめ

とっても便利なんですが残念なのがいずれも古いブラウザ(特にIE)だと対応してないこと。 
手法が新しくなっても古いIE対策は宿命ですね…。