修改复选框样式

﹏ヽ暗。殇╰゛Y 2021-07-24 19:40 550阅读 0赞

![在这里插入图片描述][20210203145839294.png]

//默认
          input[type="checkbox"] { 
            margin-top: 7px;
            cursor: pointer;
            position: relative;
            width: 14px;
            height: 14px;
            font-size: 14px;
            margin-right: 8px;
            background-color:#fff;
          }
    
          //选中后修改
          input[type="checkbox"]::after { 
            position: absolute;
            top: 0;
            //修改默认背景色
            //修改默认对勾颜色
            color: #fff;
            width: 14px;
            height: 14px;
            display: inline-block;
            visibility: visible;
            text-align: center;
            border-radius: 2px;
            content: " ";
          }
          // 被选中
          input[type="checkbox"]:checked::after { 
            border: none;
            border-radius: 2px;
            // content: "✔";
             background-color:red;
            content: "/";
            font-size: 12px;
            font-weight: lighter;
          }

[20210203145839294.png]: /images/20210724/e0b8ffd56077496aa5995b093314ee8b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，550人围观）

还没有评论，来说两句吧...

相关阅读

相关 css复选框样式_使用CSS样式复选框

css复选框样式 Introduction: 介绍： Sometimes we want to develop a website or web page that wo

秒速五厘米/ 2023年03月05日 11:58/ 0 赞/ 28 阅读

相关 checkbox样式美化修改复选框样式

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMT

忘是亡心i/ 2023年02月17日 11:20/ 0 赞/ 51 阅读

相关 ionic之样式复选框

1、实例背景 ionic复选框用的是checkbox，checkbox有各种各样的样式 2、实例源码 <!DOCTYPE html>

桃扇骨/ 2022年07月15日 14:49/ 0 赞/ 228 阅读

相关仿复选框样式

相信大家在看到很多炫酷的网页时总会看到样式很棒的复选框，于是脑补下代码“input\[‘type=”checkbox”’\]:padding:10px;border:1px

梦里梦外;/ 2022年06月08日 04:20/ 0 赞/ 229 阅读

相关关于jsp页面checkbox复选框的默认样式的修改(自定义复选框样式)

checkbox复选框的默认样式太low，最近做的项目我选择了自定义样式，网上找了不少文章内容冗余，并且并不是都有效果，所以将自己过程整理出来，以备后用。只要在jsp页面和

客官°小女子只卖身不卖艺/ 2022年05月31日 09:00/ 0 赞/ 461 阅读

相关复选框

![70][] package tu; import java.awt.BorderLayout; import java.awt.B

「爱情、让人受尽委屈。」/ 2022年05月19日 08:10/ 0 赞/ 337 阅读

相关伪类复选框改变样式

大家在开发的过程中，肯定都用过复选框，那么大家有没有为了改变样式而烦恼过？这里给大家介绍特别简单的一种方式。话不多说，上代码。 <!DOCTYPE html>

Myth丶恋晨/ 2021年09月18日 14:04/ 0 赞/ 370 阅读

相关 input checkbox 复选框大小修改

前言 checkbox的大小是不能通过宽高是设定的，而且在调checkbox的样式的同时，很可能会调乱同行的其他样式。解决方法设置`zoom`

忘是亡心i/ 2021年09月17日 09:16/ 0 赞/ 702 阅读

相关 uniapp 修改radio/checkbox（单选框/复选项）样式大小

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xp

爱被打了一巴掌/ 2021年09月13日 15:42/ 0 赞/ 3777 阅读

相关修改复选框样式

![在这里插入图片描述][20210203145839294.png] //默认 input[type="checkbox"] {

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 19:40/ 0 赞/ 551 阅读