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:@ ...
随机推荐
- Window下UDP(socket)接和收数据案例
配置QT的环境变量,这台电脑à属性à高级系统设置à高级à环境变量à系统变量àpathàC:\Qt\Qt5.3.0\5.3\mingw482_32\bin;C:\Qt\Qt5.3.0\Tools\ ...
- 怎样在BIOS中设置RAID?
随着价格的下降和相应主板的支持.眼下SATA硬盘已经逐渐成为主流. 但因为受芯片组和操作系统的影响.不少用户对SATA硬盘的使用及安装系统掌握不足,今天小编就给大家介绍一下SATA硬盘的日常应用技巧. ...
- 对于HBase的MapReduce性能提升方案之BulkLoad
我们知道,在第一次海量数据批量入库时,我们会选择使用BulkLoad的方式. 简单介绍一下BulkLoad原理方式:(1)通过MapReduce的方式,在Map或者Reduce端将输出格式化为HBas ...
- QueryString 地址栏参数
MXS&Vincene ─╄OvЁ &0000002 ─╄OvЁ MXS&Vincene MXS&Vincene ─╄OvЁ:今天很残酷,明天更残酷,后天很美好 ...
- android4.4的两个bug
Android4.4做了大量的改动.但也造成了非常多新的问题. 工作中碰到了几个比較有趣的bug.这两个bug在nexus 5上也有. 记录一下.以资纪念 1.Android4.4在解析jpg头的时候 ...
- DotNetBar.Bar作为容器使用的方法及Text更新原理
DotNetBar.Bar作为容器使用的方法及Text更新原理 老帅 一.容器用法 控件DevComponents.DotNetBar.Ba ...
- Oracle 静态监听注冊具体解释
Oracle 静态监听注冊具体解释 网上有非常多关于oracle 监听静态注冊的文章.但大多都是简单说说,并没有具体的样例.这里,将结合linux as4 下的oracle 10gR2.0.1 举一个 ...
- 洛谷⑨月月赛Round2 官方比赛 OI
自评: (完成时间3.5时) 第一题 模拟 虽然A了,代码敲得有点慢 第二题 最短路 第一次敲对了,又考虑数据范围和答案范围,改错了,100分改成42分.QAQ. 第三题 乱搞 80分 还可以(因为没 ...
- springboot 异常: Requested bean is currently in creation: Is there an unresolvable circular reference?
2018-07-31 11:56:18.812 WARN 10316 --- [ main] ConfigServletWebServerApplicationContext : Exception ...
- Spark底层原理简化版
目录 Spark SQL/DF的执行过程 集群运行部分 Aggregation Join Shuffle Tungsten 内存管理机制 缓存敏感计算(Cacheaware computation) ...