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

最新推荐文章于 2024-06-10 21:55:44 发布

weixin_30790841

最新推荐文章于 2024-06-10 21:55:44 发布

阅读量1.3k

点赞数

原文链接：http://www.cnblogs.com/xiaoshen666/p/10767310.html

版权

本文介绍了一种使用CSS和HTML隐藏原本的Radio输入框，并通过Label和Span元素自定义按钮样式的技巧。这种方法可以实现更美观的用户界面，同时保持交互功能不变。文章还提供了具体的代码示例，包括如何应用active状态改变按钮边框。

摘要由CSDN通过智能技术生成

把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>

label {
    -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;
}