HTML と CSS だけでラジオボタンの画像選択 & 選択状態
お母ちゃん
2018.10.3
本記事にはアフィリエイト広告が含まれます。
0
0
font-awesome で アイコン選択にしてみた。
See the Pen ラジオボタンの画像選択 & 選択状態をCSSだけで実装 by HomeMadeGarbage (@hmg) on CodePen.
切り替わるテキストは position: fixed; で指定しているので実際は使えなさそう。
目次
ソースコード
head
font-awsome
|
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<h2>今の気分は？</h2> <ul class="radio-select"> <li> <input type="radio" id="check1" name="check" /> <label for="check1"></label> <div class="choice-btn"><i class="far fa-smile-beam"></i></div> <p>SMILE</p> </li> <li> <input type="radio" id="check2" name="check" /> <label for="check2"></label> <div class="choice-btn"><i class="far fa-smile"></i></div> <p>NORMAL</p> </li> <li> <input type="radio" id="check3" name="check" /> <label for="check3"></label> <div class="choice-btn"><i class="far fa-angry"></i></div> <p>ANGRY</p> </li> <li> <input type="radio" id="check4" name="check" /> <label for="check4"></label> <div class="choice-btn"><i class="far fa-sad-cry"></i></div> <p>CRY</p> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
body { background: #75c1d0; max-width: 40rem; margin: auto; } h2 { text-align: center; margin-bottom: 3rem; } .radio-select li { display: inline-block; border-radius: 5px; position: relative; margin: 0 1rem; } /* input は隠す */ .radio-select input { display: none; } /* labelはz-index1 で上に持ってくる */ .radio-select label { display: block; width: 100px; height: 100px; position: relative; z-index: 1; } /* labelの下に表示させる要素のスタイルを position absolute で指定 */ .radio-select .choice-btn { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; background: #fff; border: 10px solid transparent; border-radius: 50%; box-sizing: border-box; transition: .4s; } /* アイコンとテキストのスタイル。*/ .radio-select i { font-size: 5rem; transition: .4s; } .radio-select p { position: fixed; top: 4rem; left: 0; left: 50%; transform: translateX(-50%); margin: auto; width: 7rem; text-align: center; z-index: 2; opacity: 0; transition: .4s; background: white; border-radius: 2rem; font-weight: bold; } /* マウスオーバー時のスタイル */ .radio-select label:hover { cursor: pointer; } .radio-select input[type="radio"]:checked + label + .choice-btn i, .radio-select li:hover i { transform: scale(1.1); } /* 選択時のスタイル（要素毎に色を変更） */ .radio-select li:nth-child(1) input[type="radio"]:checked + label + .choice-btn { background: #FBFFB9; } .radio-select li:nth-child(2) input[type="radio"]:checked + label + .choice-btn { background: #D3F8E2; } .radio-select li:nth-child(3) input[type="radio"]:checked + label + .choice-btn { background: #EEC0C6; } .radio-select li:nth-child(4) input[type="radio"]:checked + label + .choice-btn { background: #BCC4DB; } .radio-select input[type="radio"]:checked + label + .choice-btn + p { opacity: 1; } |
