javascript - 改变input type=radio的样式

问题描述

问 题

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

解决方案

• 圆形改为方形是不可以的， 按照你的需求， 你可以用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"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
</style>

样式如图。

这篇关于javascript - 改变input type=radio的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！