更改checkbox的默认样式

Dear 丶 2021-12-09 15:39 348阅读 0赞

**原理： label **绑定 checkbox，** **可以通过点击该label来触发该 checkbox，通过 labe l的 **:after** 或 **:before**伪类来修改样式

HTML:

<div>
      <input type="checkbox" id="checkbox_a1" class="chk_1" value="徒步" />
      <label for="checkbox_a1">徒步</label>
    
      <input type="checkbox" id="checkbox_a2" class="chk_1" value="游泳" />
      <label for="checkbox_a2">游泳</label>
    
      <input type="checkbox" id="checkbox_a3" class="chk_1" value="跑步" />
      <label for="checkbox_a3">跑步</label>
    </div>

CSS:

<style>
      .chk_1 {
        display: none;
      }
    
      .chk_1 + label {
        background-color: #fff;
        border: 1px solid #c1caca;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 9px;
        border-radius: 5px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
      }
      .chk_1 + label:active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
      }
    
      .chk_1:checked + label {
        background-color: #ecf2f7;
        border: 1px solid #92a1ac;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
        color: #243441;
      }
    
      .chk_1:checked + label:after {
        content: "\2714";
        position: absolute;
        top: -6px;
        left: 0px;
        color: #758794;
        width: 100%;
        text-align: center;
        font-size: 1.2em;
        padding: 1px 0 0 0;
        vertical-align: text-top;
      }
    </style>

效果：

![818748-20190521180808369-1172253287.png][]

Skill comes from consistent and deliberate practice.       ---Shawn Allen

转载于:https://www.cnblogs.com/JasmineLily/p/10901482.html

[818748-20190521180808369-1172253287.png]: /images/20211209/43a3094f9c014da9a6946a17990d76b7.png

发表评论取消回复

表情：

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

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

相关阅读

相关 uniapp 中修改 uni-checkbox 默认样式

uniapp checkbox 默认样式是 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

痛定思痛。/ 2023年01月08日 08:04/ 0 赞/ 287 阅读

相关 uni-app - 更改默认 checkbox 组件样式（变为实心圆/更改√对号大小等）

前言 > 组件文档：[https://uniapp.dcloud.io/component/checkbox][https_uniapp.dcloud.io_compon

男娘i/ 2022年12月28日 11:23/ 0 赞/ 739 阅读

相关 input search更改默认删除按钮的样式

改input输入框search属性下输入文字之后会在输入框最后出现一个默认样式的X不过这个样式不太好看想自定义怎么办呢方法一 input[type="search

川长思鸟来/ 2022年12月23日 06:26/ 0 赞/ 164 阅读

相关 css修改radio、checkbox默认样式

> 为radio类型的input标签添加类名aui-radio，如下 ![0b22aa3cc73441feb246bb914f2aa713.png][] 然后引入

本是古典何须时尚/ 2022年09月16日 01:27/ 0 赞/ 266 阅读

相关如何改变默认的checkbox样式

我们在项目中使用到input标签的checkbox的时候，它的默认样式通常无法满足项目需求，主要是它显得有点小而丑。将它根据项目的需求进行改造就是我们要做的事情了，下面讲两种

今天药忘吃喽~/ 2022年06月13日 13:28/ 0 赞/ 696 阅读

相关 Ant Design Table 更改默认样式，表格全局居中样式解决方法

.standardTable \{ :global \{ .ant-table-thead > tr > th > \{ text-align: center

忘是亡心i/ 2022年05月20日 10:28/ 0 赞/ 1003 阅读

相关修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式

表单中，经常会使用到单选按钮和复选框，但是，input\[type="radio"\] 和 input\[type="checkbox"\] 的默认样式在不同的浏览器或者手机上

怼烎@/ 2021年12月21日 14:29/ 0 赞/ 361 阅读

相关更改checkbox的默认样式

原理： label 绑定 checkbox，可以通过点击该label来触发该 checkbox，通过 labe l的 :after 或 :before伪类来修改样式 HTM

Dear 丶/ 2021年12月09日 15:39/ 0 赞/ 348 阅读

相关 android checkbox样式

<table> <tbody> <tr> <td>1. 首先要导入你准备用作CheckBox选中和补选中状态的两图片到res的drawable中，如ch

刺骨的言语ヽ痛彻心扉/ 2021年10月26日 14:42/ 0 赞/ 323 阅读

相关改变checkbox默认样式

.html <div class='checkbox option'> <input type='checkbox' id='checkbox

小鱼儿/ 2021年09月13日 15:58/ 0 赞/ 408 阅读