css 能改变input type radio和checkbox 圆圈或方框的大小吗？

Question

rt
怎么才能改变？

Answer 1

html<label>
    <input type="checkbox" class="hidden-input" />
    <span class="your style about checkbox"></span>
    记住我
</label>

css.hidden-input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

input[type=checkbox]+span {
    /* your style goes here */
    display: inline-block;
    height: 1em;
    width: 1em;
    border-radius: 4px;
    background-color: gray;        
}

/* active style goes here */
input[type=checkbox]:checked+span {
    background-color: red;
}

建议你这么做，不需要js，你可以完全自定义你想要的东西。
ps：对于所有长得丑还不让你给它打扮的html元素，你都可以尝试这种方案，哪怕动用js。

Answer 2

css设置width和height

Answer 3

现在浏览器都喜欢用 Shadow DOM 之流将这种控件的代码封装起来，如果浏览器不提供 API 的话能做的东西其实比较有限。我搜索了一圈似乎并没有看到有类似的 API，大部分人似乎都是自定义来着。使用-webkit-appearance 属性可以不显示浏览器给的默认样式，这样我们就可以自己定义空间的样式表了，以下是一个 DEMO：http://runjs.cn/detail/bqnpmle9

Answer 4

把input隐藏，外面套label，再里面加个span，样式写在span上，让label覆盖在span上面，js去改active的class

<label for="remember" class="text-muted"><span class="circle-btn"></span><input type="radio" id="remember" style="display:none;" />记住密码</label>

csslabel {
    -webkit-user-select: none;
}
.circle-btn {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    border: 1px solid #808080;
    transition: all 0.4s;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline-block;
    vertical-align: middle;
    margin: -4px 3px 0 0;
}
.circle-btn.active {
    border-width: 5px;
    border-color: #1dace8;
}

其实不用js也可以实现。。不过我还没尝试过

Answer 5

<form> <input type="checkbox" name="accpet_condition" style="width:40px; height:40px"/>我已阅读并同意《服务条款》 </form> </div>我本来认为css找到checkbox以后就可以改了，但是，#accept form checkbox{}好像并不能，于是就直接内嵌样式写了····

<

div id="accept">

Answer 6