Firefoxだけcssが効かない

お問い合わせフォームのラジオボタンを装飾したくcss記述を入れたのですが、firefoxだけスタイルが効いてくれません。

記述したcssは以下になります。

input[type="radio"] {
    position: relative;
    -webkit-appearance: button;
    appearance: button;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    content: "";
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
    top:-2px;
    margin-right:.5em;
}

input[type="radio"]:checked:after {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    content: "";
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
}

どうしたらfirefoxでもスタイルが適用される様になるのでしょうか...

行動規範の内容に同意します

回答1件

ベストアンサー

-moz-appearanceと言ったFireFox専用のベンダプレフィックスつきのスタイルを指定していないからです.

https://developer.mozilla.org/ja/docs/Web/CSS/-moz-appearance

なお, FireFoxではinput要素に対する::before/::after疑似要素が無効となるため, チェック済みの状態を表すためにこれらを利用することができません. 別途background-imageプロパティに専用の画像を設定するなどして下さい. 例えばこのように.

CSS
1input[type="radio"] {
2    position: relative;
3    -webkit-appearance: button;
4    -moz-appearance: button;
5    appearance: button;
6    -webkit-box-sizing: border-box;
7    box-sizing: border-box;
8    width: 24px;
9    height: 24px;
10    content: "";
11    background-color: white;
12    border: 1px solid #000;
13    border-radius: 50%;
14    vertical-align: middle;
15    cursor: pointer;
16    top:-2px;
17    margin-right:.5em;
18}
19
20input[type="radio"]:checked{
21  background-image: radial-gradient(circle at 50% 50%, black 40%, transparent 50%);
22}

投稿2018/04/12 10:34

編集2018/04/12 14:27

defghi1977

総合スコア4756

MOMONUTS

2018/04/12 14:06

ご回答ありがとうございます。 input[type="radio"] に -moz-appearance: button; を入れたところ表示は希望通りになりましたが、選択出来ない感じなのです... input[type="radio"]:checked:after にも何か入れる必要があるのでしょうか

MOMONUTS

2018/04/12 15:16

教えて下さった input[type="radio"]:checked{ を追記する事により、全てのブラウザで期待通りの表示になりました！本当にありがとうございました！

行動規範の内容に同意します