1

Здравствуйте. Нужно реализовать радио кнопки в CSS, но не могу допереть как. Суть в том, что есть выбор машин, и при нажатии должен выделяться синим. Если не получится кодом, то как картинками сделать? Чтобы при нажатии на радио, она менялась на другую. Пример

1
  • 1
    Нужно реализовать? Так реализуйте! Это не фриланс биржа
    – korytoff
    14 дек 2015 в 10:19

2 ответа 2

1

Приблизительно так

* {
  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>

1
  • Код работает, подредактировал под себя. Но есть одна проблема, я использую Contact Form 7 для WP и когда вставляю туда этот код, то перестает работать стиль. Могу скинуть ссылку. 14 дек 2015 в 14:27
0

: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;
}
2
  • Вы уверены, что это будет работать?
    – soledar10
    14 дек 2015 в 10:27
  • нет, не уверен. 14 дек 2015 в 10:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.