Retraction of images when applied in reverse
-
There's a list of the radio button, we need to get a picture out of it when we press.
That's what you need.
It's just that the picture goes for the field.
<ul>♪ Please help me.p, h3 { margin: 7px 0; } label { vertical-align: top; } h3.btn { border: 1px solid #ccc; display: inline-block; padding: 5px 10px; border-radius: 10px } ul.mainform1 { text-align: center; font-size: 0; vertical-align: top; box-shadow: 0 0 5px rgba(0, 0, 0, 0.21); } ul.mainform1 > li { display: inline-block; vertical-align: bottom; font-size: 14px; width: 20%; margin: 45px 0; } [id^=r-] { display: none; } [id^=r-] + label { display: block; box-shadow: 1px #ccc; padding: 15px; cursor: pointer; min-height: 140px; } [id^=r-] + label .i { display: block; background: transparent; margin: 0 auto; } [id^=r-] + label h3 { font-size: 19px; font-weight: 400; } [id^=r-] + label .h3-unsure { display: none; } [id^=r-]:checked + ul li { display: block; background: url(http://a0013169.xsph.ru/wp-content/uploads/2015/12/unsure.png); background-position: center; color: #fff; } [id^=r-]:checked + label .i, [id^=r-]:checked + label p { display: none; } [id^=r-]:checked + label h3 { color: #fff; display: none; } [id^=r-]:checked + label h3.btn { border: 1px solid #fff; display: none; } [id^=r-]:checked + label .h3-unsure { display: none; } span.wpcf7-form-control-wrap .wpcf7-text { width: 80%; } .column_column ul { margin: 0 0 0 30px; line-height: 21px; }<ul class="mainform1"> <li> <input type="radio" id="r-1" name="r" /> <label for="r-1" style="border-right: 1px solid rgba(204, 204, 204, 0.48);;"> <span class="i"><img src="http://a0013169.xsph.ru/wp-content/uploads/2015/12/car7.png"></span> <p>Car</p> <h3 class="h3-unsure">Unsure?</h3> <h3 class="btn">Select</h3> </label> </li> <li> <input type="radio" id="r-2" name="r" /> <label for="r-2" style="border-right: 1px solid rgba(204, 204, 204, 0.48);;"> <span class="i"><img src="http://a0013169.xsph.ru/wp-content/uploads/2015/12/van7.png"></span> <p>Car</p> <h3 class="h3-unsure">Unsure?</h3> <h3 class="btn">Select</h3> </label> </li> <li> <input type="radio" id="r-3" name="r" /> <label for="r-3" style="border-right: 1px solid rgba(204, 204, 204, 0.48);;"> <span class="i"><img src="http://a0013169.xsph.ru/wp-content/uploads/2015/12/car7.png"></span> <p>Car</p> <h3 class="h3-unsure">Unsure?</h3> <h3 class="btn">Select</h3> </label> </li> <li> <input type="radio" id="r-4" name="r" /> <label for="r-4" style="border-right: 1px solid rgba(204, 204, 204, 0.48);;"> <span class="i"><img src="http://a0013169.xsph.ru/wp-content/uploads/2015/12/truck7.png"></span> <p>Car</p> <h3 class="h3-unsure">Unsure?</h3> <h3 class="btn">Select</h3> </label> </li> <li> <input type="radio" id="r-5" name="r" /> <label for="r-5"> <span class="i"><img src="http://a0013169.xsph.ru/wp-content/uploads/2015/12/suv7.png"></span> <p>Car</p> <h3 class="h3-unsure">Unsure?</h3> <h3 class="btn">Select</h3> </label> </li> </ul>
-
Maybe you could use that sort of thing. http://jsfiddle.net/wk904jrb/ It's gonna have to be overwhelmed if you need it.
radio buttonBut for example, I think it'll help you.$(document).ready(function() { $(".checklist .checkbox-select").click( function(event) { event.preventDefault(); $(this).parent().addClass("selected"); $(this).parent().find(":checkbox").attr("checked", "checked");});
$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeAttr("checked");});
});
body {
font: 12px/1.3"Lucida Grande", "Lucida", "Arial", Sans-serif;
}
h4 {
font-size: 17px;
}
fieldset {
border: 0;
}
.checklist {
list-style: none;
margin: 0;
padding: 0;
}
.checklist li {
float: left;
margin-right: 10px;
background: url(http://i10.pixs.ru/storage/4/9/0/checkboxbg_5279710_19877490.gif) no-repeat 0 0;
width: 105px;
height: 150px;
position: relative;
font: normal 11px/1.3"Lucida Grande", "Lucida", "Arial", Sans-serif;
}
.checklist li.selected {
background-position: -105px 0;
}
.checklist li.selected .checkbox-select {
display: none;
}
.checkbox-select {
display: block;
float: left;
position: absolute;
top: 118px;
left: 10px;
width: 85px;
height: 23px;
background: url(http://i9.pixs.ru/storage/5/0/0/selectgif_5090996_19877500.gif) no-repeat 0 0;
text-indent: -9999px;
}
.checklist li input {
display: none;
}
a.checkbox-deselect {
display: none;
color: white;
font-weight: bold;
text-decoration: none;
position: absolute;
top: 120px;
right: 10px;
}
.checklist li.selected a.checkbox-deselect {
display: block;
}
.checklist li p {
text-align: center;
padding: 8px;
}
.sendit {
display: block;
float: left;
top: 118px;
left: 10px;
width: 115px;
height: 34px;
border: 0;
cursor: pointer;
background: url(http://i10.pixs.ru/storage/5/0/3/senditgif_8513494_19877503.gif) no-repeat 0 0;
text-indent: -9999px;
margin: 20px 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<fieldset>
<label for="choices">
<h4>Оригинальные checkbox</h4>
<ul class="checklist">
<li>
<input name="jqdemo" value="value1" type="checkbox" />
<p>Первая секция</p>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a>
</li>
<li>
<input name="jqdemo" value="value2" type="checkbox" />
<p>Вторая секция</p>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a>
</li>
<li>
<input name="jqdemo" value="value3" type="checkbox" />
<p>Третья секция</p>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a>
</li>
<li>
<input name="jqdemo" value="value4" type="checkbox" />
<p>Четверая секция</p>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a>
</li>
</ul>
</label>
<div style="clear: both;"></div>
<button class="sendit" type="submit" name="submitbutton" title="Submit the form" />Send it!</button>
</fieldset>
</form>
