Question

我正在创建自定义单选按钮并且确实应用了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;
}

Answer 1

rgba之后的数字分别是红色，绿色，蓝色和不透明度的值。您将背景设置为0不透明度，因此您将无法看到它。

rgba(0, 0, 0, 0)

没有看到这个的Plunker，我假设如果删除最后的0或将其更改为1.0，您应该能够看到背景颜色和图像。

Answer 2

由于您没有附加工作代码进行测试，因此很难判断错误在哪里。我已经用简单的例子对它进行了测试，它应该可以工作，请记住你的css选择器正常工作。

以下是我测试的简单示例：

＆＃13;

<!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>

＆＃13;

无法在自定义单选按钮上应用css

2 个答案: