复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)
复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)
复选框html内容如下:
<input type="checkbox" id="checkbox1"><label for="checkbox1">123</label>
<input type="checkbox" id="checkbox2"><label for="checkbox2">23</label>
上面复选框的样式如下:
input[type="checkbox"] {
width: 20px;
height: 20px;
background-color: #fff;
-webkit-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 2px;
outline: none;
}
input[type="checkbox"]:checked {
background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
no-repeat center;
background-size: 100% 100%;
}
复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)的更多相关文章
- [CSS]复选框单选框与文字对齐问题的研究与解决.
前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...
- 关于SWT常用组件(按钮,复选框,单选框(Button类))
Button是SWT中最常用的组件.Button类的继承关系图: Button类的构造方法是newe Button(Composite parent,int style)它有两个参数: 第一个参数:是 ...
- pentaho cde 自定义复选下拉框 checkbox select
pentaho 自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...
- MFC控件编程之复选框单选框分组框
MFC控件编程之复选框单选框分组框 一丶分组框 分组框 英文叫做 GroubBox 添加了分组框主要就是分组.好看.不重点介绍 二丶单选框 英文: Raido Button 单选框需要注意的事项 1. ...
- ztree根据参数动态控制是否显示复选框/单选框(静态JSON数据)
本文不再更新,可能存在内容过时的情况,实时更新请访问原地址:ztree根据参数动态控制是否显示复选框/单选框(静态JSON数据): 现有全省各地区静态JSON数据,现在想通过Url参数,动态控制是否显 ...
- jq check 复选变单选。
$("input[type='checkbox']").on("click",function(e){ var $checked = $("input ...
- php 查找数组中是否存在某项,并返回指定的字符串,可用于检查复选,单选等
/** * 查找数组中是否存在某项,并返回指定的字符串,可用于检查复选,单选等 * @param $id * @param $ids * @param string $returnstr * @ret ...
- js自定义修改复选框单选框样式,清除复选框单选框默认样式
之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...
- jquery模拟下拉框单选框复选Select,Checkbox,Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...
- angularjs 复选框 单选框
关于复选框,在做项目的时候,有一下几点心得 单选框 1.判断哪个单选框选中的情况 html代码 判断该复选框是否选中 $scope.agree.isChecked 判断这个值,如果等于1,代表 ...
随机推荐
- 「考试」小P的生成树
考场上想到一半正解,没想到随机化,不然也许能够$A$掉. 题目所说的其实就是向量加法,求模长最长的向量生成树. 我们考虑对于两个向量,必然在平行边形对角线方向上,他们的投影和是最大的,长度就是对角线长 ...
- 吉利WA数
- 梯度下降法及一元线性回归的python实现
梯度下降法及一元线性回归的python实现 一.梯度下降法形象解释 设想我们处在一座山的半山腰的位置,现在我们需要找到一条最快的下山路径,请问应该怎么走?根据生活经验,我们会用一种十分贪心的策略,即在 ...
- 1005 csp-s 60 凉凉
T1 嘟嘟噜 上来一看数据范围1e9就蒙蔽,然后不知所措的打了一个 $ O(n)$的无脑算法,由于本人真的脑小,导致O(n)的柿子推了好长时间,导致心态崩了,然后........ 今天能明白了log的 ...
- [UWP]使用CompositionAPI的翻转动画
1. 运行效果 在 使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow) 这篇文章里我介绍了一个包含长阴影的番茄钟,这个番茄钟在状态切换时用到了翻转动画,效 ...
- 在Debian/Ubuntu上面安装升级nginx到最新版
在Debian下面通过 apt-get 可以自动安装 nginx,不过版本一般比较老,如果想要使用nginx的最新特性就需要升级版本. 一般安装可以通过编绎源文件安装,但可能需要安装很多编绎工具, ...
- spark-Worker内部工作流程
- pat 1042 Shuffling Machine(20 分)
1042 Shuffling Machine(20 分) Shuffling is a procedure used to randomize a deck of playing cards. Bec ...
- 【计算机网络】TCP基础知识详解
1. TCP概念相关 [!NOTE] TCP(Transmission Control Protocol),又叫传输控制协议. TCP协议是面向连接的,可靠的,基于字节流的传输协议.在基于 TCP 进 ...
- Leetcode 25/24 - Reverse Nodes in k-Group
题目描述 Leetcode 24 题主要考察的链表的反转,而 25 题是 24 的拓展版,加上对递归的考察. 对题目做一下概述: 提供一个链表,给定一个正整数 k, 每 k 个节点一组进行翻转,最后返 ...