質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

6988閲覧

radio buttonのデザインがIEで反映されない(上手くいかない)

fkryu

総合スコア31

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/01 03:54

前提・実現したいこと

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でも表示できればと思います。

どうぞよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

まず、実現したい状態の画像も、投稿に含めたほうがいいかもしれません。

そもそも、input type="radio"などは、CSSでの調整が非常に難しいなどもありますが、、、
CSSをみる限りでは、
width、height値がpxで固定になっているので、
そこから検討してみてはいかがでしょうか?
(160pxは、input要素に効かせるには少々大きすぎるかと思います)
スマホでは、ご質問のCSSの大きさ、
PCでは、50pxにする、など、
デバイス別で大きさを変えるなどがいいでしょう。
(スマホ PC CSS 分ける とかで検索すればいろいろな方法がでてくるはずです。)

また、大きさ以外の部分もどうやら効いていないようなので、
<input>要素の隣に、空のspan要素(<span></span>)を追加し
下記のようなCSSを使う、でいかがでしょうか。

html

1<label> 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_"><span></span> 5<!-- 後ろ隣にspan要素追加 --> 6</label> 7 8<label> 9<i class="fa fa-calendar-check-o fa-3x" aria-hidden="true"></i> 10<span>右のラジオボタン</span> 11<input type="radio" value="右のラジオボタン" name="reservation[behavior]" id="reservation_behavior_"><span></span> 12<!-- 後ろ隣にspan要素追加 --> 13</label> 14

css

1input[type="radio"]{ 2 display: none; 3} 4 5input[type="radio"] + span { 6 display: block; 7 width: 160px; 8 line-height: 30px; 9 height: 160px; 10 position:absolute; 11 top:0; 12 bottom:0; 13 right:0; 14 left:0; 15 margin:auto; 16 font-size: 12px; 17 background: transparent; 18 border: none; 19 outline: none; 20 border-radius: 2px; 21 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); 22 transition: box-shadow 200ms cubic-bezier(0.4,0.0,0.2,1); 23 -moz-appearance: none; 24}

input要素にCSSつけるのは諦めて、隣の要素にスタイルを効かせる方法です。

投稿2018/02/01 04:19

編集2018/02/01 06:25
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fkryu

2018/02/01 04:48

ありがとうございます。 spanにcssをつけてできました。 ただinput::checked{ border: 1px solid #64C6E9; } をつけたい場合は、どのように対応すれば良いのでしょうか。
miyabi_takatsuk

2018/02/01 04:57

同様の考え方のセレクタで大丈夫です。 input[type="radio"]::checked + span { /* CSS */ } もともとこの手法、チェックした時にCSS変えるのに便利な方法なんですよね。
fkryu

2018/02/01 05:18

ありがとうございます。 チェックした時の色がつくようになりました。 ただ左のラジオボタンにチェックが付いていて、右のラジオボタンをクリックしても色が右のラジオボタンにつきません。。
miyabi_takatsuk

2018/02/01 05:27

同じ選択肢のradioボタンと認識されてないのかも。 input name=""のnameの値が、同じかどうか確認してみてください。
fkryu

2018/02/01 05:32

name id共に同じでした。。
miyabi_takatsuk

2018/02/01 05:32

参考として、回答投稿の、htmlに、右のラジオボタンを追加しました。
miyabi_takatsuk

2018/02/01 05:34 編集

なるほど。では、idは変えてみてください。 nameは同じで、idは変える、でやってみてください。 (その際、ラップしている、labelのfor属性もidと同じく変えます)
fkryu

2018/02/01 05:54

それ以外の方法はなにかございませんか?
miyabi_takatsuk

2018/02/01 06:15

idは変えられない状況ってことでしょうか? であるならば、 labelタグのfor属性をとってください。 labelで、個々のradioボタン囲っているなら、わざわざforで指定しなくても動くので。
guest

0

CSS

1-ms-appearance:normal;

を入れてみてはどうでしょうか

投稿2018/02/01 06:43

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問