Я создаю настраиваемую радиокнопку и применил 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;
}
0
adhirath wcities 13 Май 2016 в 14:51

2 ответа

Лучший ответ

Трудно сказать, в чем ошибка, поскольку вы не приложили рабочий код к тесту. Я проверил это на простом примере, и он должен работать, имея в виду, что ваш селектор 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>
0
helenys 13 Май 2016 в 13:21

Цифры после rgba - это значения для красного, зеленого, синего и непрозрачности соответственно. Вы устанавливаете непрозрачность фона на 0, поэтому вы не сможете его увидеть.

rgba(0, 0, 0, 0)

Не видя Plunker этого, я предполагаю, что если вы удалите последний 0 или измените его на 1.0, вы сможете увидеть цвет фона и изображение.

0
Christian Hill 13 Май 2016 в 11:57