无法在自定义单选按钮上应用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

回答

相关问题