修改radio、checkbox和select默认样式

mumumu 发布于2019-08-21 10:50 / 1570人阅读

摘要：现在前端页面效果日益丰富，默认的组件样式显然已经不能满足需求。兼容更低版本浏览器的样式修改最后附上演示链接修改和默认样式

现在前端页面效果日益丰富，默认的input组件样式显然已经不能满足需求。趁着这次开发的页面中有这方面的需求，在这里整理一下修改radio、checkbox、select的方法。

radio and checkbox

修改radio的默认样式有两种常用的方法

纯CSS

此方法需借助CSS3，关键CSS代码如下

.demo1 input[type="radio"],.demo1 input[type="checkbox"]{
    display:none; 
}
.demo1 label:before{
    content: "";
    display: inline-block;
    width: 17px;
    height: 16px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #3797fc;
}
.demo1 input[type="radio"] + label:before{
     border-radius: 8px;
}
.demo1 input[type="checkbox"] + label:before{
     border-radius: 3px;
}
.demo1 input[type="radio"]:checked+label:before{
    content: "2022";
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 19px;
}
.demo1 input[type="checkbox"]:checked+label:before{
    content: "2713";
    font-size: 15px;
    color: #f3f3f3;
    text-align: center;
    line-height: 17px;
}

优点：充分借助了CSS3的优势，无需使用js和图片，仅用纯CSS3就可搞定

缺点：兼容性较差，仅支持IE9+

js+图片

js代码：

$(function(){
    $(".demospan").bind("click",function(){
        $(this).addClass("on").siblings().removeClass("on");
    })

    $(".piaochecked").bind("click",function(){
        $(this).hasClass("on_check")?$(this).removeClass("on_check"):$(this).addClass("on_check");
        // $(this).toggleClass("on_check");
    })
})

css代码

.demospan{
    display: inline-block;
    width: 24px;
    height: 18px;
    /*float: left;*/
    padding-top: 3px;
    cursor: pointer;
    text-align: center;
    margin-right: 10px;
    background-image: url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/inputradio.gif);
    background-repeat: no-repeat;
    background-position: -24px 0;
}
.demo21{
    opacity: 0;
    cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}
.on{
    background-position: 0 0;
}
.piaochecked{
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 10px;
    text-align: center;
    background-image:  url(http://sandbox.runjs.cn/uploads/rs/161/i5pmsg7s/checkbox_01.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
}
.on_check{
    background-position: 0 -21px;
}
.cbdemo2{
    opacity: 0;
    cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
    filter:alpha(opacity=0);
}

优点：兼容性高，支持IE6+

缺点：使用js+图片较为麻烦

select

/*select*/
 .select select{
    /*复写Chrome和Firefox里面的边框*/
     border:1px solid  green;
     /*清除默认样式*/
     appearance:none;
     -moz-appearance:none;
     -webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
 }
 /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

该方法关键在于清除默认样式，使用css3的appearance属性，但是兼容性较差，仅支持IE9+。若要兼容低版本浏览器，可以使用Div进行模拟。

//Todo

兼容更低版本浏览器的select样式修改

最后附上演示链接：修改radio、checkbox和select默认样式

idc机房托管服务器托管 select默认值 select下拉箭头样式默认样式修改样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86281.html

总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

asce1885 2019-08-02 12:09 评论0 收藏0
总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

Anshiii 2019-08-29 17:26 评论0 收藏0
js原生操作select、radio 、checkbox

摘要：常见操作常见操作常见操作常见操作代码下拉框单选框多选框代码常见操作常见操作获取选中值第一种通过对象获取第二种通过选中的下标来获取获取获取选中文本值通过选中的下标来获取选中文本值设置选中项知道的值或者下标或者文本值下面代码只列出根据来选中获取 select、radio 、checkbox常见操作 select常见操作 radio常见操作 select常见操作 html代码 ...

CoorChice 2019-08-01 17:18 评论0 收藏0
js原生操作select、radio 、checkbox

摘要：常见操作常见操作常见操作常见操作代码下拉框单选框多选框代码常见操作常见操作获取选中值第一种通过对象获取第二种通过选中的下标来获取获取获取选中文本值通过选中的下标来获取选中文本值设置选中项知道的值或者下标或者文本值下面代码只列出根据来选中获取 select、radio 、checkbox常见操作 select常见操作 radio常见操作 select常见操作 html代码 ...

HitenDev 2019-08-20 18:29 评论0 收藏0