Здравствуйте. Нужно реализовать радио кнопки в CSS, но не могу допереть как. Суть в том, что есть выбор машин, и при нажатии должен выделяться синим. Если не получится кодом, то как картинками сделать? Чтобы при нажатии на радио, она менялась на другую.
-
1Нужно реализовать? Так реализуйте! Это не фриланс биржа– korytoff14 дек 2015 в 10:19
Добавить комментарий
|
2 ответа
Приблизительно так
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
p,
h3 {
margin: 10px 0;
}
ul {
text-align: center;
font-size: 0;
}
ul > li {
display: inline-block;
vertical-align: middle;
font-size: 14px;
width: 20%;
margin: 15px 0;
}
[id^=r-] {
display: none;
}
[id^=r-] + label {
display: block;
border: 1px solid #ccc;
padding: 15px;
cursor: pointer;
min-height: 140px;
}
[id^=r-] + label .i{
display: block;
width: 30px;
height: 30px;
background: #000;
margin: 0 auto;
}
[id^=r-] + label h3 {
font-size: 17px;
}
[id^=r-] + label .h3-unsure{
display: none;
}
[id^=r-]:checked + label {
display: block;
background: blue;
color: #fff;
}
[id^=r-]:checked + label .i,
[id^=r-]:checked + label h3{
display: none;
}
[id^=r-]:checked + label .h3-unsure{
display: block;
}
<ul>
<li>
<input type="radio" id="r-1" name="r" />
<label for="r-1">
<span class="i">Icon</span>
<h3>Title</h3>
<h3 class="h3-unsure">Title unsure</h3>
<p>text</p>
</label>
</li>
<li>
<input type="radio" id="r-2" name="r" />
<label for="r-2">
<span class="i">Icon</span>
<h3>Title</h3>
<h3 class="h3-unsure">Title unsure</h3>
<p>text</p>
</label>
</li>
<li>
<input type="radio" id="r-3" name="r" />
<label for="r-3">
<span class="i">Icon</span>
<h3>Title</h3>
<h3 class="h3-unsure">Title unsure</h3>
<p>text</p>
</label>
</li>
<li>
<input type="radio" id="r-4" name="r" />
<label for="r-4">
<span class="i">Icon</span>
<h3>Title</h3>
<h3 class="h3-unsure">Title unsure</h3>
<p>text</p>
</label>
</li>
<li>
<input type="radio" id="r-5" name="r" />
<label for="r-5">
<span class="i">Icon</span>
<h3>Title</h3>
<h3 class="h3-unsure">Title unsure</h3>
<p>text</p>
</label>
</li>
</ul>
-
Код работает, подредактировал под себя. Но есть одна проблема, я использую Contact Form 7 для WP и когда вставляю туда этот код, то перестает работать стиль. Могу скинуть ссылку. 14 дек 2015 в 14:27
:active
нажатие. :hover
наведение мышкой. обери в ссылку <a></a>
.
В конечном итоге что-то типа:
<div class="item"><a href="#">Unsure? We will help</a></div>
.item a:active {
color: blue;
}
для кнопки, все тоже самое, но
input[type=radio]:active{
color: blue;
}