改变input type=radio的样式

Question

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

Answer 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"] {

    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>

样式如图。