Hello. I need to implement radio buttons in CSS, but I can't figure out how. The bottom line is that there is a choice of machines, and when pressed it should be highlighted in blue. If the code fails, then how to make the pictures? To when you click on the radio, it changed to another. Example

  • one
    Need to implement? So implement! This is not a freelance exchange - korytoff

2 answers 2

Something like this

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

  • The code works, edited by itself. But there is one problem, I use Contact Form 7 for WP and when I insert this code there, the style stops working. I can throw the link. - Konstantin

:active click. :hover mouseover. Get in the link <a></a> . In the end, something like:

 <div class="item"><a href="#">Unsure? We will help</a></div> .item a:active { color: blue; }

for the button, everything is the same, but

 input[type=radio]:active{ color: blue; }
  • Are you sure this will work? - soledar10
  • no, not sure. - DisguisePerceptron