CSS Radio button in the form of feedback



  • Hello. We need to use the CSS radio buttons, but I can't catch up. The point is, there's a choice of cars, and when you press it, it's got to be blue. If the code doesn't work, how do we make pictures? To get her on the radio, she changed. Пример



  • So close.

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


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2