改变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>

样式如图。

Answer 2

无法直接改变边框，建议将原本的radio透明度设为0，重叠一层自己的样式，选中通过class或者伪类来控制

Answer 3

根据你的描述，你对样式的需求和checkbox默认的样式很像，直接用checkbox好了，然后用js实现单选行为，几行js可以实现。

Answer 4

直接checkbox用js单选实现

Answer 5

估计你觉得checkbox长得好看 （手动滑稽）

Answer 6

type="checkbox"

Answer 7

 input[type="radio" ] {
        width: 20px;
        height: 20px;
        background: #fff;
        -webkit-appearance: none;
        border: 1px solid #999;
    }
    
   input[type="radio" ]:checked {
        background:url("../img/select.png");
        background-size: cover;
    }

-webkit-appearance: none清除了默认样式，然后就可以自定义了。