如何更改FireFox中單選按鈕的樣式？

我嘗試更改單選按鈕，我嘗試以下行。我的風格適用于除Firefox 之外的所有瀏覽器。事實上，我在 Firefox 中看不到樣式。

#payment_method_paypal[type='radio']::after {
    width: 20px !important;
    height: 20px !important;
    border-radius: 3px;
    top: -6px !important;
    left: -1px !important;
    position: relative;
    background-color: #fff !important;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #776330 !important;
}

#payment_method_paypal[type='radio']:checked::after {
    width: 20px !important;
    height: 20px !important;
    border-radius: 3px;
    top: -6px !important;
    left: -1px !important;
    position: relative;
    background-color: #776330 !important;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #776330 !important;
    box-shadow: inset 0 0 0 2px #fff !important;
    margin-left: 6px;
}


#payment_method_stripe[type='radio']::after {
    width: 20px !important;
    height: 20px !important;
    border-radius: 3px;
    top: -6px !important;
    left: -1px !important;
    position: relative;
    background-color: #fff !important;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #776330 !important;
}

#payment_method_stripe[type='radio']:checked::after {
    width: 20px !important;
    height: 20px !important;
    border-radius: 3px;
    top: -6px !important;
    left: -1px !important;
    position: relative;
    background-color: #776330 !important;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #776330 !important;
    box-shadow: inset 0 0 0 2px #fff !important;
    margin-left: 6px;
}

<input id="payment_method_stripe" type="radio" class="input-radio" name="payment_method" value="stripe" checked="checked" data-order_button_text="">
<label for="payment_method_stripe">Credit / Debit Card</label>

<input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal" data-order_button_text="Proceed to PayPal">
<label for="payment_method_paypal">PayPal</label>

JSF 中間鏈接

如何在Firefox 中應用這種風格？導致Firefox不顯示的問題是什么？

我已經嘗試過以下解決方案：

樣式單選按鈕 - 不適用于 IE 和 Firefox 如何更改單選和復選框輸入的樣式

uj5u.com熱心網友回復：

我喜歡佐藤的回答，但您也可以將其添加到您的 CSS 中：

input[type='radio'] {
  -moz-appearance: initial !important;
}

我會盡量避免!important在您的 CSS 中使用，這不是一個好習慣。我想如果你從你的代碼中洗掉它，你可能可以從我的代碼片段中洗掉它。

uj5u.com熱心網友回復：

我認為這段代碼對你有用。

.checkbox {
  position: relative;
  padding-left: 30px;
  margin-right: 20px;
}
.checkbox input {
  width: 0;
  height: 0;
  position: absolute;
}
.checkbox span {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: -1px;
    background-color: #fff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #776330;
    box-sizing: border-box;
}
.checkbox span::after {
    position: absolute;
    content: '';
    left: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    background-color: #776330;
    display: none;
}

.checkbox input:checked ~ span::after {
    display: block;
}

<label class="checkbox" for="payment_method_stripe">
  <input id="payment_method_stripe" type="radio" class="input-radio" name="payment_method" value="stripe" checked="checked" data-order_button_text="">
  <span></span>
  Credit / Debit Card
</label>


<label class="checkbox" for="payment_method_paypal">
  <input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal" data-order_button_text="Proceed to PayPal">
  <span></span>
  PayPal
</label>

標籤：html css 火狐

上一篇：CSS-行內SVG會干擾行高？

下一篇：每個類的單獨媒體查詢？