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默认样式的更多相关文章

  1. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

  2. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...

  3. CSS设置input placeholder文本的样式

    placeholder是HTML5  input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...

  4. css设置input获得焦点的样式

    input:focus{ 样式; } 这样就ok

  5. 16 input默认样式清除

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  6. 设置TextBlock默认样式后,其他控件的Text相关属性设置失效问题

    问题: 定义了默认TextBlock样式后,再次自定义下拉框 or 其他控件 ,当内部含有TextBlock时,设置控件的字体相关样式无效,系统始终使用TextBlock设置默认样式 解决方案: 为相 ...

  7. safari input默认样式

    在i标签下嵌套一个input标签  设置了 -webkit-apprarence:none: 设置了宽高,和padding:3px 结果placeholder显示不全 经排查 这时候的input默认有 ...

  8. CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示

    CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...

  9. css设置input中placeholder字体

    设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...

随机推荐

  1. Openfire:重新配置openfire

    有些时候当我们在对openfire开发时,需要重置openfire的配置,这时最简单的方法就是重新运行openfire的安装程序.要重新运行安装程序,方法很简单: 打开openfire的安装目录,找到 ...

  2. 关于压缩软件gzip和xz的简单对照

    晚上因为处理磁盘报警的须要.进行了日志压缩,在此次压缩中分别使用了gzip和xz软件对文本进行了压缩.压缩的结果很令人诧异. 出于对xz好奇的原因是因为在下载内核源码时常常能够看到.xz格式的文件包. ...

  3. PHP array_flip()

    定义和用法 array_flip() 函数返回一个反转后的数组,如果同一值出现了多次,则最后一个键名将作为它的值,所有其他的键名都将丢失. 如果原数组中的值的数据类型不是字符串或整数,函数将报错. 语 ...

  4. ORA-12547错误

    http://www.linuxidc.com/Linux/2013-03/81330p3.htm << good http://www.verydemo.com/demo_c158_i6 ...

  5. HIHO 16 C

    树分治.对于一棵子树的根节点,至少有一条边与儿子相连的属于重边.对于一条轻边,它的贡献值是两端子树大小的乘积,所以,重边应该是贡献值最大的一边. 至于要求所有的点,进行深度优先搜索,因为移动一个点只会 ...

  6. IOS_OC_Category

    1.Category概述 那的Category的使用场景有那些呢: 1.类包括了非常多个方法实现,而这些方法须要不同团队的成员来实现 2.当你在使用基础类库中的类时,你不想继承这些类而仅仅想加入一些方 ...

  7. leetcode第一刷_Same Tree

    回来更博客的时候才发现.这道题不是跟推断树是不是对称的很相像吗.这个也是用了两个指针同一时候递归啊,有时候思维的局限真可笑. class Solution { public: bool isSameT ...

  8. Linux I2C驱动分析(三)----i2c_dev驱动和应用层分析 【转】

    本文转载自:http://blog.chinaunix.net/uid-21558711-id-3959287.html 分类: LINUX 原文地址:Linux I2C驱动分析(三)----i2c_ ...

  9. linux下获取按键响应事件【转】

    本文转载自:https://my.oschina.net/u/157503/blog/91548 1.问题 通过一个死循环将读取键盘对应的设备文件将触发键盘事件在屏幕上打印出来,按esc退出程序 代码 ...

  10. 我在Suse 11 Sp3上使用anaconda安装TensorFlow的过程记录

    我在Suse 11 Sp3上使用anaconda安装TensorFlow的过程记录 准备安装包: gcc48 glibc--SP4-DVD-x86_64-GM-DVD1.iso tensorflow_ ...