無法在自定義單選按鈕上應用css

我正在創建自定義單選按鈕，並且確實應用了css，而且看起來不錯，但是當我點擊它時，不會改變外觀。無法在自定義單選按鈕上應用css

這裏是我的HTML：

<input type="radio" name="single_multiple_flag" class="radio" id="single_venue" value="single_venue" checked="checked"> 
<label for="single_venue">Single Venue</label> &nbsp;&nbsp;&nbsp;&nbsp; 
<input type="radio" name="single_multiple_flag" class="radio" id="multiple_venue" value="multiple_venue"> 
<label for="multiple_venue">Multiple Venues</label>

這裏是我的CSS：

.ugc_block .ele1 input[type=radio]{opacity:0;} 
.ugc_block .ele1 label::before{ 
    background: rgba(0, 0, 0, 0) url("../images/check.png") no-repeat scroll -6px -5px/375px auto; 
    content: ""; 
    height: 30px; 
    margin-left: -45px; 
    margin-top: -3px; 
    position: absolute; 
    width: 27px; 
} 

.ugc_block .ele1 input[type=radio]:checked + .ugc_block .ele1 label::before{ 
    background: rgba(0, 0, 0, 0) url("../images/checked.png") no-repeat scroll -103px -5px/375px auto; 
    content: ""; 
    height: 30px; 
    margin-left: -45px; 
    margin-top: -3px; 
    position: absolute; 
    width: 27px; 
}

來源

2016-05-13 adhirath wcities

你做錯了你的第二個CSS。代替該： '.ugc_block .ele1輸入[類型=無線電]：檢查+ .ugc_block .ele1標籤:: before' 則應使用此： '.ugc_block .ele1輸入[類型=無線電] ：檢查+標籤::之前' 這將工作 –

哦是的！你說得對。即使@helenys做了正確和相同的事情。謝謝你們:) –

由於您未附上工作代碼進行測試，因此很難判斷出錯。我已經用簡單的例子對它進行了測試，它應該可以工作，記住你的css選擇器正常工作。

這是我測試的簡單的例子：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
label::before{ 
 
    content: ""; 
 
    background-color:red; 
 
    height: 30px; 
 
    position: absolute; 
 
    width: 30px; 
 
    margin-left:-40px; 
 
    
 
} 
 

 
input[type=radio]{ 
 
    margin-left:30px; 
 
    opacity:0; 
 
} 
 
input[type=radio]:checked + label::before{ 
 
    content: ""; 
 
    background-color:green; 
 
    height: 30px; 
 
    position: absolute; 
 
    width: 30px; 
 
    margin-left:-40px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<input type="radio" name="single_multiple_flag" class="radio" id="single_venue" value="single_venue" checked="checked"> 
 

 
<label for="single_venue">Single Venue</label> &nbsp;&nbsp;&nbsp;&nbsp; 
 

 
<input type="radio" name="single_multiple_flag" class="radio" id="multiple_venue" value="multiple_venue"> 
 

 
<label for="multiple_venue">Multiple Venues</label> 
 

 

 
</body> 
 
</html>

來源

2016-05-13 12:54:04 helenys

以下RGBA的數字是紅，綠，藍和不透明度，分別價值。您將背景設置爲0不透明度，因此您將無法看到它。

rgba(0, 0, 0, 0)

沒有看到這方面的一個Plunker，如果你刪除最後一個0或將其更改爲1.0，你應該能夠看到的背景顏色和圖像我假設。

來源

2016-05-13 11:57:41

它不工作。加載時可以看到單選按鈕的圖像，但單擊時無法更改它。 –

無法在自定義單選按鈕上應用css

回答

相關問題