更改checkbox的默认样式
最近做一个vue项目要用到checkbox要修改默认样式,选中是纯白色,不选择只有白色边框,起初以为很容易,没想到还折腾了一翻,记录一下。
几经折腾,理清input 和label的关系
最终改进版本,将复选框隐藏,利用label元素的焦点传递特性,用label的样式替代复选框。这应该是最简版了,可以随意改样式了。
贴上代码:
<div class="container">
<input type="checkbox" value="" @change="bindProductCheck1" v-model="ckeckVal"
id="checkbox-p1" style="display: none;">
<label for="checkbox-p1"></label>
</div> .container{
display:flex;
}
#checkbox-p1 + label {
width:44px;
height:44px;
box-sizing: border-box;
border-radius: 22px;
border: 4px solid #fff;
} #checkbox-p1:checked + label {
background-color: #ffffff;
}
所以了解底层原理就没那么容易被坑了
更改checkbox的默认样式的更多相关文章
- 修改 input[type="radio"] 和 input[type="checkbox"] 的默认样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 改变checkbox的默认样式
针对于CheckBox默认样式的改变,和选中状态的改变 <label class="checkBox"><input type="checkbox&qu ...
- 微信小程序修改radio和checkbox的默认样式和图标
wxml: <view class="body"> <view class="body-content"> 第1题:企业的价值观是 ? ...
- 更改bootstrap的默认样式
很久没用bootstrap,对与按自己的需求修改样式都忘了. 一上来就添加了新的class类,重写css样式让其覆盖原有的样式,实际上不起作用.因为没考虑的选择器的优先级.面试的时候会问到一些这个问题 ...
- 关于更改ListBox的ItemsPanel样式
首先定义一个ListBoxItem的样式,用来显示相应的图片信息 <Style TargetType="{x:Type ListBoxItem}" > <Sett ...
- 修改radio、checkbox、select默认样式的方法
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...
- 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?
Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...
- 如何在PeopleSoft中找到并更改默认样式表名称
PeopleSoft的默认样式表名称是用来控制应用程序的外观的.在PeopleSoft中可以使用集中样式表来更改应用程序的外观,oracle为每个应用程序版本设置了默认的样式表. 下面是不同应用程序版 ...
- 表单:checkbox、radio样式(用图片换掉默认样式)
checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...
随机推荐
- 在vultr安装和使用golang
1.vultr可以用微信或支付宝充值,方便.好像推荐别人用还能挣美分,懒得弄了,参加了一个充10刀送50刀的活动,感觉实惠(实际用时感觉有点小贵). 2.注册登录后,控制面板上billing可查看余额 ...
- AppCan移动开发技巧:3步走,获取移动APP签名信息
大家知道,在移动APP开发里,与应用包名一样,应用的签名信息需是唯一的,否则将会出现应用冒领.重复安装等问题.之前分享过安卓应用的签名如何获取(点击查看),这里将继续以AppCan平台为例,分享如何获 ...
- Unity3D介绍
Unity3D介绍:Unity3D是一个游戏开发引擎 由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具 ...
- Java SpringBoot集成RabbitMq实战和总结
目录 交换器.队列.绑定的声明 关于消息序列化 同一个队列多消费类型 注解将消息和消息头注入消费者方法 关于消费者确认 关于发送者确认模式 消费消息.死信队列和RetryTemplate RPC模式的 ...
- 求导程序编写(oo-java编程)
本单元的任务为求导. 即将一个含自变量x的多项式F求导成为另外一个含自变量x的多项式f.使得 dF/dx = f 为降低我们的难度,这个任务被分解成了三个阶段: (1)对幂函数进行求导(不允许嵌套) ...
- golang学习和使用经验总结
学习网址 https://studygolang.com/pkgdoc go标准库网站 https://blog.csdn.net/sanxiaxugang/article/details/60324 ...
- MapReduce实例——求平均值,所得结果无法写出到文件的错误原因及解决方案
1.错误原因 mapreduce按行读取文本,map需要在原有基础上增加一个控制语句,使得读到空行时不执行write操作,否则reduce不接受,也无法输出到新路径. 2.解决方案 原错误代码 pub ...
- Spring Boot 集成Swagger
Spring Boot 集成Swagger - 小单的博客专栏 - CSDN博客https://blog.csdn.net/catoop/article/details/50668896 Spring ...
- Scrapy:腾讯招聘整站数据爬取
项目地址:https://hr.tencent.com/ 步骤一.分析网站结构和待爬取内容 以下省略一万字 步骤二.上代码(不能略了) 1.配置items.py import scrapy class ...
- python 字典用法
d = {key1 : value1, key2 : value2 } 1.创建 dict1 = { 'abc': 456 } 2.访问/修改 dict['Name'] 3.删除 del dict[' ...