使用css修改checkbox选择框的样式-阿里云开发者社区

开发者社区> 振礼硕晨> 正文

使用css修改checkbox选择框的样式

简介: 二. 修改思路: 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置。
+关注继续查看

二. 修改思路:

  • 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置。

  • 然后使用绝对定位label标签覆盖到checkbox框上面,通过修改label标签达到修改checkbox框的目的。

三. 具体代码:

代码一:设置“√”为元素的内容,点击之后显示对勾
// HTML代码
<input type="checkbox" id="test" class="test">同意
<label for="test"></label>
// CSS代码
<style>
    #test{
        visibility: hidden;
    }

    #test +label{
        width: 18px;
        height: 18px;
        background-color: #c07721;
        display: block;
        position: relative;
        top: -18px;
        left: -2px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
    }

    #test:checked +label:before{
        content: "√";       /*这里设置选中之后的显示内容*/
        width: 18px;
        height: 18px;
        display: block;
        color: #ffffff;
        text-align: center;
        font-weight: bolder;
        line-height: 18px;
    }
</style>
效果一:
img_1d89f7bf7727551bfe84344a7c007898.gif
代码二:设置背景图片,点击之后,显示背景图片
// HTML代码
<input type="checkbox" id="test" class="test">同意
<label for="test"></label>
// CSS代码
<style>
    #test{
        visibility: hidden;
    }

    #test +label{
        width: 18px;
        height: 18px;
        background-color: #666666;
        display: block;
        position: relative;
        top: -18px;
        left: -2px;
        border-radius: 4px;
        cursor: pointer;
        overflow: hidden;
    }

    #test:checked +label:before{
        content: " ";
        width: 18px;
        height: 18px;
        background: url("img/check.jpg") no-repeat;
        background-size: 100% auto;
        display: block;
        color: #ffffff;
        text-align: center;
        font-weight: bolder;
        line-height: 18px;
    }
</style>
效果二:
img_8e4f9786568e4952a3df2efc5cde3f45.gif

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
css知多少(6)——选择器的优先级
原文:css知多少(6)——选择器的优先级 1. 引言   上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。      上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令?   上面还是比较简单的,下面在来一个复杂的:      上图中的该显示成什么颜色呢? 2. 特指度   要解决以上问题,我们需要引入一个概念——特指度(specificity)。
803 0
优秀教程:使用 CSS3 动画实现的超炫的过渡特效
  Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为。
810 0
关于友好性测试中鼠标样式的修改
在日常的界面测试中,我们一定会有这样的CheckPoint:鼠标移到可点击标识的上方时是否变为小手。 上图中的鼠标样式是错误的,要想修改成小手我们需要对应的找到他所对应页面元素的CSS样式并做修改(添加红字部分): div[id$='icmbx'] { display: inl...
786 0
安卓开发_复选按钮控件(CheckBox)的简单使用
复选按钮 即可以选择若干个选项,与单选按钮不同的是,复选按钮的图标是方块,单选按钮是圆圈 复选按钮用CheckBox表示,CheckBox是Button的子类,支持使用Button的所有属性 一、由于复选框可以选中多项,所有为了确定用户是否选择了某一项,还需要为每一个选项添加setOnCheck...
884 0
网站验收新标准:所有颜色均可以在可视化后台修改
网站验收新标准:所有颜色均可以在可视化后台修改 在大部分用户的概念中,定制网站比起比尔云标准化模板建站要高大上,但阅读完本文后,或许你会认识到这是一种不太科学的认识!为什么?请问你的网站上线后自己可以在可视化编辑界面任意调整各种颜色吗? “这个蓝色需要调整,我觉得浅了一点”,于是乎网络公.
1113 0
+关注
振礼硕晨
爱学习,爱设计
43
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载