改变表单元素input中radio，checkout，button，submit等固定默认样式

最新推荐文章于 2023-07-17 22:59:29 发布

郝强强1994

最新推荐文章于 2023-07-17 22:59:29 发布

阅读量1.7k

点赞数 2

分类专栏：前端文章标签： cdd 默认样式 redio checkbox 表单

原文链接：https://www.cnblogs.com/yuanyanbk/p/8136682.html

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在表单元素中，默认的input样式很不美观，有时候需要修改默认的样式
默认框的修改：

<label class="checkBox"><input class=‘’box“ type="checkbox">全选</label>

input[type='checkbox']{
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance:none;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    outline: none;
}
.box[type='checkbox']{
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance:none;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    outline: none;
}
.checkBox input[type='checkbox']{
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance:none;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    outline: none;
}

这三种方式均可以产生效果。

选中状态:

input[type=checkbox]:checked{
   background: url("../images/checkbox_icon.png")no-repeat center;
}
.box[type=checkbox]:checked{
   background: url("../images/checkbox_icon.png")no-repeat center;
}
.checkBox input[type=checkbox]:checked{
   background: url("../images/checkbox_icon.png")no-repeat center;
}

这三种形式也都可以。
经测试type为radio，button，submit的也可以。

转载自：https://www.cnblogs.com/yuanyanbk/p/8136682.html