CSS设置input默认样式

HTML
<ul class="box">
<li>
<input type="checkbox" name="vehicle" id="vehicle">
<label for="vehicle">第一个选项</label>
</li>
<li>
<input type="checkbox" name="vehicle" id="vehicle2">
<label for="vehicle2">第二个选项</label>
</li>
</ul>
CSS
ul,
li {
padding:;
margin:;
list-style: none;
} .box input[type="checkbox"] {
width: 12px;
height: 12px;
border: 1px solid #e2e2e2;
background: none;
box-shadow: none;
} .box input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
display: inline-block;
margin: 0 2px 2px 0;
width: 12px;
height: 12px;
cursor: pointer;
outline: none;
vertical-align: middle;
border: 1px solid #e2e2e2;
} .box input:checked {
border: 1px solid #13af13;
}
.box input:checked::before {
content: "";
display: block;
position: relative;
width: 3px;
height: 6px;
left: 34%;
top: 9%;
border-right: 1px solid #13af13;
border-bottom: 1px solid #13af13;
transform: rotate(45deg);
background: none;
}
CSS设置input默认样式的更多相关文章
- CSS系列——浏览器默认样式
了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...
- css清除浏览器默认样式
css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...
- CSS设置input placeholder文本的样式
placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...
- css设置input获得焦点的样式
input:focus{ 样式; } 这样就ok
- 16 input默认样式清除
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- 设置TextBlock默认样式后,其他控件的Text相关属性设置失效问题
问题: 定义了默认TextBlock样式后,再次自定义下拉框 or 其他控件 ,当内部含有TextBlock时,设置控件的字体相关样式无效,系统始终使用TextBlock设置默认样式 解决方案: 为相 ...
- safari input默认样式
在i标签下嵌套一个input标签 设置了 -webkit-apprarence:none: 设置了宽高,和padding:3px 结果placeholder显示不全 经排查 这时候的input默认有 ...
- CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示
CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...
- css设置input中placeholder字体
设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...
随机推荐
- MVC.Net:添加第三方类库的bundles引用
以jQuery Mobile为例.当我们用nuget添加jQuery Mobile的package后,需要在项目中引用jQuery Mobile.传统的做法是在html页面上添加 <link h ...
- Python获取当前系统时间
Python获取当前系统时间 import time #返回当前时间 def GetNowTime(): return time.strftime("%Y-%m-%d %H:%M:% ...
- poj3296--Rinse(三分)
题目链接:点击打开链接 题目大意:有一个酒桶容量为Vc.里面还有Vw的酒,如今用Vb的水去刷酒桶,每次酒桶的内壁上会留下Vr的液体,最多能够刷k次,问怎么样刷酒桶.能够让酒桶里面的就最少. 假设Vb+ ...
- C#遍历DataSet与DataSet元素实现代码
C#中的Dataset就像一个数据库,有多个表(Table),一般只有一个表,然后每个表中有行(DataRow)和列(DataColumn),DataRow[DataColumn]可以得到某行某列数据 ...
- 【POJ 3076】 Sudoku
[题目链接] http://poj.org/problem?id=3076 [算法] 将数独问题转化为精确覆盖问题,用Dancing Links求解 [代码] #include <algorit ...
- 【转】iPhone获取状态栏和导航栏尺寸(宽度和高度)
原文网址:http://blog.csdn.net/chadeltu/article/details/42708605 iPhone开发当中,有时需要获取状态栏和导航栏高度.宽度信息,方便布局其他控件 ...
- 94. Ext.MessageBox消息框
转自:https://www.cnblogs.com/libingql/archive/2012/03/30/2426198.html Ext JS消息提示框主要包括:alert.confirm.pr ...
- Intervals(差分约束系统)
http://poj.org/problem?id=1201 题意:给定n个整数闭区间[a,b]和n个整数c,求一个最小的整数集合Z,满足Z里边的数中范围在闭区间[a,b]的个数不小于c个. 思路:根 ...
- Rancher 2:添加 NFS client provisioner 动态提供 Kubernetes 后端存储卷
一.前提说明 1.说明: NFS client provisioner 利用 NFS Server 给 Kubernetes 作为持久存储的后端,并且动态提供PV. 默认 rancher 2 的存储类 ...
- JQuery 数据加载中禁止操作页面
比较常见的做法,但对我而言是第一次做,记录一下. 为了把找来的loading.gif 的背景色设置为透明,还特意装了quicktime. 有学到一些额外的东西. 先将div及img定义好 <bo ...