自定義選擇性別
阿新 • • 發佈:2018-11-20
html:
<div class="label"> <label for="man" class="radio_label checked"> <input type="radio" name="sex" id="man" value="1" checked="checked">男 </label> <label for="woman" class="radio_label"> <input type="radio" name="sex" id="woman" value="2" >女 </label> </div>
css:
.label{ position: absolute; width: 386px; height: 25px; float: left; display: inline-block; top: 25%; left: 143px; font-size: 27px; line-height: 27px; } .radio_label{ background-repeat: no-repeat; -webkit-background-size: 25px 50px; background-size: 25px 50px; display: inline-block; line-height: 25px; text-indent:30px; margin-right:10px; } .radio_label.checked { background-position: 0 -25px; } .radio_label input[type='radio'] { display:none; } input::-webkit-input-placeholder{ color: #917449; } input::-webkit-input-placeholder{ color: #917449; } input::-moz-placeholder{ color: #917449; }
js:
//選擇性別 $("input[type='radio']").click(function(){ $("input[type='radio'][name='"+$(this).attr('name')+"']").parent().removeClass("checked") $(this).parent().addClass("checked"); });