定製複選框在Firefox上失敗

我正在嘗試使用CSS3自定義複選框，該功能在Chrome上運行良好。在Firefox上...不是那麼多。定製複選框在Firefox上失敗

編輯：似乎在Firefox 37

下面的答案是工作的罰款仍然是相關的，但是從2013年中期的風格有關的問題都解決了。

這裏沒有提到IE的支持，但是歡迎編輯/回答。

demo

的HTML：

<input type="checkbox" id="first"/> 
<label for="first">This is pretty awesome</label>

的CSS：

input[type=checkbox] { 
    appearance: none; 
    background: transparent; 
    position: relative; 
} 
input[type=checkbox]::after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: ''; 
    text-align: center; 
    background: #aaa; 
    display: block; 
    pointer-events: none; 
    opacity: 1; 
    color: black; 
    border: 3px solid black; 
} 
input[type=checkbox] + label { 
    line-height: 48px; 
    margin: 0 15px 0 15px; 
} 
input[type=checkbox]:hover::after { 
    content: ''; 
    background: #32cd32; 
    opacity: .3; 
} 
input[type=checkbox]:checked::after { 
    content: '\2713'; 
    background: #32cd32; 
} 
input[type=checkbox]:checked:hover::after { 
    opacity: 1; 
} 
input[type=checkbox], 
input[type=checkbox]::after { 
    width: 48px; 
    height: 48px; 
    font-size: 46px; 
    line-height: 48px; 
    vertical-align: middle; 
    border-radius: 50%; 
} 
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

_{注：我去掉供應商前綴，事情就是這樣的用戶選擇了簡潔。完整的代碼在筆中。}

我需要更改哪些內容才能讓它看起來與Firefox上的相同？

期望：

chrome desired look

不理想：

firefox bad look

來源

2013-08-23 FakeRainBrigand

純CSS無法實現。 url：http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field –

其他mozilla鏈接：http://forums.mozillazine.org/viewtopic.php?f=25&t= 291007 –

對不起，我修正了圖片。所以後文*在Firefox上顯示，但沒有顯示border-radius或box-shadow。我甚至願意以某種方式隱藏複選框。我試圖隱藏複選框，並將':: after'作爲標籤的':: before'。 – FakeRainBrigand

我設法解決它，就像似乎是可能的（我仍然希望一個更好的解決辦法，如果存在）。我打開所有的選擇從

input[type=checkbox]::after

到

input[type=checkbox] + label::after

缺點：

需要一個標籤

但是：

HTML需要輸入元素把標籤

結論：

唯一不好的無效HTML

來源

2013-08-23 12:04:03 FakeRainBrigand

我有這個完全相同的問題。你有沒有找到另一種不需要標籤的方式？ – lightswitch05

不，唯一的其他解決方案需要JavaScript來模仿標籤的功能。 – FakeRainBrigand

犯規技術上需要一個標籤，但確實需要通過標記來控制確保在複選框後立即有一個目標兄弟姐妹。

即

input[type=checkbox] + span::after{ 
 
    display:block; 
 
    width:50px; 
 
    height:50px; 
 
    background:yellow; 
 
    display:block; 
 

 
} 
 

 
input[type=checkbox]:checked + span::after{ 
 
    display:block; 
 
    width:50px; 
 
    height:50px; 
 
    background:yellow; 
 
    display:block; 
 

 
}

<input type="checkbox"></input> 
 
    <span class="targetMe"></span>

目標使用同級選擇器和跨距：元素如上之後。

還不如把在標籤中壽在這一點...：P

來源

2016-04-18 04:24:23 Fivebears

的問題是，:after和::after技術上創建一個元素作爲最後孩子pseudoselector應用於元素的。 Firefox不喜歡在其複選框內創建子項。這實際上是replaced elements更大的主題的一部分。

您會看到一個不工作的複選框的:before和::before pseudoelements相同的問題，因爲他們會被選中創建元素作爲元素內的第一孩子元素。

來源

2016-11-01 18:46:55

定製複選框在Firefox上失敗

編輯：似乎在Firefox 37

demo

回答

相關問題