改变input type=radio的样式

input type= radio默认样式是圆形,现在想改为方形,选中样式想要中间框内为对号,同时方框和对号变为蓝色


慕仙森
浏览 1593回答 1
1回答

慕慕森

圆形改为方形是不可以的, 按照你的需求, 你可以用checkbox来代替radio的功能,但是你就要用JS来控制,不能让它多选,通过js是可以做到的。这就涉及到定制checkbox的样式。 我上一段代码。<input type="checkbox" id="c1" name="cc" /><label for="c1"><span></span>Check Box 1</label><input type="checkbox" id="c2" name="cc1" /><label for="c2"><span></span>Check Box 2</label><style>input[type="checkbox"] {&nbsp; &nbsp; display:none;}input[type="checkbox"] + label span {&nbsp; &nbsp; display:inline-block;&nbsp; &nbsp; width:19px;&nbsp; &nbsp; height:19px;&nbsp; &nbsp; margin:-1px 4px 0 0;&nbsp; &nbsp; vertical-align:middle;&nbsp; &nbsp; background:url(check_radio_sheet.png) left top no-repeat;&nbsp; &nbsp; cursor:pointer;}input[type="checkbox"]:checked + label span {&nbsp; &nbsp; background:url(check_radio_sheet.png) -19px top no-repeat;</style>样式如图。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript