2016-04-08 1 views
1

Я пытаюсь создать настраиваемый переключатель. Я нашел 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; 
} 

Я могу получить это:

enter image description here

Единственная проблема, я не могу нажать работать на кнопку псевдо радио сам. Мне нужно щелкнуть по метке. И причина в том, что в моем случае ярлык не растягивается на div .check. Какой стиль я должен дать моему лейблу, чтобы он наложил на div? Если вы хотите увидеть полный html и css, это here.

+0

Просто поместите входы внутри этикетки. –

+0

@MrLister, я знаю, что это еще один способ достижения флажка или клика с помощью радиокниги при щелчке соответствующей метки. В этом случае вам не нужно указывать атрибут «для». Но если вы посмотрите на мой html, вы увидите, что я скрываю фактическое радио и имитирую его щелчок другим элементом div. –

+1

Итак, поставьте оба входа и .checks внутри этикеток. [Здесь, скрипка] (https://jsfiddle.net/MrLister/9hy9j12k/). –

ответ

2

Это должно работать:

Я слегка отредактировали .container label стиль немного двигаться влево, чтобы быть выше CheckBox изображений.

.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; 
 
    height: 30px; 
 
    z-index: 9; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.25s linear; 
 
     margin: 10px auto 10px -26px; 
 
    padding: 25px 25px 25px 36px; 
 
    position: relative; 
 
} 
 
.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 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>

+0

Большое спасибо. Я вижу различия в стиле этикетки, но не могли бы вы объяснить, почему это сработало именно так? Кстати, я исправил свойство ярлыка искусств, чтобы вы могли удалить это уведомление. –

+0

Что я в основном сделал, это переместить ярлыки влево, чтобы они содержали изображение флажка. Если вы посмотрите на код, вы заметите, что метки теперь имеют отрицательную маржу слева ... Надеюсь, это достаточно ясно :) – Robert

+0

Для достижения того, что я хочу, мне нужно было дать ему отрицательное левое поле –

Смежные вопросы