前提・実現したいこと
radio buttonにcssでデザインをつけています。
iOSなどでは問題なく反映されているのですが、IEでは上手く表示されずに困っています。
該当のソースコード
html
1<label for="reservation_behavior_"> 2<i class="fa fa-calendar-check-o fa-3x" aria-hidden="true"></i> 3<span>問い合わせ</span> 4<input type="radio" value="問い合わせ" name="reservation[behavior]" id="reservation_behavior_"> 5</label>
css
1input[type="radio"]{ 2 -webkit-appearance: none; 3 width: 160px; 4 line-height: 30px; 5 height: 160px; 6 position:absolute; 7 top:0; 8 bottom:0; 9 right:0; 10 left:0; 11 margin:auto; 12 font-size: 12px; 13 background: transparent; 14 border: none; 15 outline: none; 16 border-radius: 2px; 17 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); 18 transition: box-shadow 200ms cubic-bezier(0.4,0.0,0.2,1); 19 -moz-appearance: none; 20} 21 22.reservation-value .fa-calendar-check-o, .reservation-value .fa-mobile{ 23 padding-left:7px; 24 color:#64C6E9; 25} 26 27.reservation-value label span{ 28 font-size:11px; 29} 30 31 32.reservation-value input[type="radio"] + .reservation-value label{ 33 padding-left: 20px; 34 position:relative; 35 margin-right: 20px; 36} 37 38.reservation-value input[type="radio"]:checked{ 39 border: 1px solid #64C6E9; 40} 41 42
iOS等での表示
IEでの表示
チェックボックスの丸がボックス一杯にあり、アイコンなども隠れてしまっています。
iOSと同じようなデザインでIEでも表示できればと思います。
どうぞよろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/01 04:48
2018/02/01 04:57
2018/02/01 05:18
2018/02/01 05:27
2018/02/01 05:32
2018/02/01 05:32
2018/02/01 05:34 編集
2018/02/01 05:54
2018/02/01 06:15