Я пытаюсь создать настраиваемый переключатель. Я нашел this аккуратный стиль, который я хочу, чтобы настроить немного, чтобы элементы выкладываются horizontally.Consider следующий HTML:Как растянуть ярлык над пользовательским div для достижения щелчка правой кнопкой мыши
<div style="margin-left:30px;">
<div class='container'>
<input type="radio" id="rdArts" name="itemcat">
<label for="rdArts">Arts</label>
<div class="check"></div>
</div>
<div class='container'>
<input type="radio" id="rdElectronics" name="itemcat">
<label for="rdElectronics">Electronics</label>
<div class="check"></div>
</div>
<div class='container'>
<input type="radio" id="rdCars" name="itemcat">
<label for="rdCars">Cars</label>
<div class="check"></div>
</div>
</div>
и этот CSS:
.container{
float:left;
position:relative;
margin-right:20px;
}
.container input[type=radio]{
position: absolute;
visibility: hidden;
}
.container label{
display: block;
position: ;
font-weight: 300;
font-size: 1.2em;
padding: 25px 25px 25px 10px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
.container:hover label{
color: #485776;
}
.container:hover .check{
border-color: #485776;
}
.container:hover .check::border{
background-color: #485776;
}
.container .check{
display: block;
position: relative;
border: 4px solid #333E54;
border-radius: 100%;
height: 15px;
width: 15px;
top: -67px;
left: -25px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.container .check::before {
display: block;
position: relative;
content: '';
border-radius: 100%;
height: 11px;
width: 11px;
top: 2px;
left: 0px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check::before{
background: #333E54;
}
Я могу получить это:
Единственная проблема, я не могу нажать работать на кнопку псевдо радио сам. Мне нужно щелкнуть по метке. И причина в том, что в моем случае ярлык не растягивается на div .check. Какой стиль я должен дать моему лейблу, чтобы он наложил на div? Если вы хотите увидеть полный html и css, это here.
Просто поместите входы внутри этикетки. –
@MrLister, я знаю, что это еще один способ достижения флажка или клика с помощью радиокниги при щелчке соответствующей метки. В этом случае вам не нужно указывать атрибут «для». Но если вы посмотрите на мой html, вы увидите, что я скрываю фактическое радио и имитирую его щелчок другим элементом div. –
Итак, поставьте оба входа и .checks внутри этикеток. [Здесь, скрипка] (https://jsfiddle.net/MrLister/9hy9j12k/). –