修改checkbox样式

checkbox默认样式

以谷歌浏览器为例

    <div class="box"><input type="checkbox" />篮球 <input type="checkbox" />足球<input type="checkbox" />乒乓球</div>

自带默认margin: 3px 3px 3px 4px

默认框框样式

    width: 10px;height: 10px;border-radius: 2px;border: 1px solid rgb(118, 118, 118);box-sizing: border-box;

选中时的样式

修改checkbox默认样式

可以设置尺寸和边距

      input[type="checkbox"] {width: 20px;height: 20px;margin: 0;}

使用appearance: none隐藏默认checkbox的框框，重写框框样式

原理：通过绝对定位覆盖原多选框

      input[type="checkbox"] {width: 20px;height: 20px;margin: 0 4px 0 0;appearance: none;position: relative;}

示例一：

   /** 未被选中的样式*/input[type="checkbox"]::before {content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9;border-radius: 4px;}/** 选中的样式 */input[type="checkbox"]:checked::before {content: "\2713";   /* 2713表示勾勾✓ */background-color: #fff;position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 1px solid #7d7d7d;border-radius: 4px;color: #7d7d7d;font-size: 20px;font-weight: bold;text-align: center;line-height: 20px;}

效果图：

示例二：

    /** 未被选中的样式*/input[type="checkbox"] {width: 20px;height: 20px;margin: 0 4px 0 0;appearance: none;position: relative;background: wheat;border-radius: 50%;}/** 选中的样式*/input[type="checkbox"]:checked::before {content: "";background: orange;position: absolute;top: 25%;left: 25%;width: 50%;height: 50%;border: none;border-radius: 50%;}

效果图：

修改checkbox样式相关推荐

关于无法修改CheckBox样式的解决方案
关于无法修改CheckBox样式的解决方案参考文章: (1)关于无法修改CheckBox样式的解决方案 (2)https://www.cnblogs.com/yangjf/archive/2012/ ...
通过CSS修改checkbox样式(利用label的for属性进行焦点传递)
需求背景: 在页面设计时,常常会用到input复选框.如果用到一些前端框架的话,一般复选框的样式都可以满足需要:但是对于未使用前端框架,直接原生的话样式可能满足不了项目需要,因此我们需要修改复选框的样 ...
【uni-app】深度作用选择器解决修改checkbox样式无效问题
uni-app表单多项选择器需要使用内置组件checkbox,具体使用见官网链接,如下: checkbox - uni-app官网 (dcloud.io) 官方给出h5端的默认样式是这样的: 现在 ...
android修改checkbox样式边框颜色
s之前写了一个自动登录和记住密码的功能,用的是checkbox控件,但是原生控件边框样式不太符合要求如图,我想修改成白色在网上查了一些资料,说在style.xml文件中定义一个样式 <sty ...
element plus修改CheckBox样式
改为以下样式 :deep(.el-checkbox__inner) { //大小width: 20px;height: 20px;border-color: #384461;border-radius ...
elementui修改checkbox样式
深度选择器: 1. >>> 2. /deep/ 3. ::v-deep /deep/ .el-checkbox__inner{ width: 31px; height: 31px; ...
css 对checkbox样式进行修改
使用伪类元素对checkbox样式进行修改边框样式在before中修改,"\2713"为字符表勾选字符<style>input[type="checkbox& ...
修改checkbox的样式
一.原生checkbox样式二.修改样式代码 css .checkboxItemBox{display: flex;input[type="checkbox"]::after { ...
使用css修改checkbox选择框的样式
二. 修改思路: 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置. 然 ...

修改checkbox样式

checkbox默认样式

修改checkbox默认样式

修改checkbox样式相关推荐

最新文章

热门文章