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. SharePoint 2013:解决爬网出错的问题

    现象: 以前一直正常的爬网突然无法顺利完成,总是在进行到某个部分就停滞不前. 调查: 在查看了log文件后,发现了这条错误 06/24/2014 11:14:51.86   NodeRunnerQue ...

  2. 最小堆min_stack

    class MinStack {public: void push(int x) { ele.push(x); if(min.empty()||x<=min.top())    // in or ...

  3. 架构师速成5.1-小学gtd进阶

    人生没有理想,那和咸鱼有什么差别. 有了理想怎样去实现.这就是gtd须要解决的问题.简单说一下gtd怎么做? 确定你的目标.假设不能确定长期目标,至少须要一个2年到3年的目标. 目标必须是能够衡量的, ...

  4. 转:Java 计算2个时间相差多少年,多少个月,多少天的几种方式

    日期比较对象 DayCompare 代码用到了  lombok ,如果不用,其实就是把getter / setter方法自己写一遍,还有构造方法. @Data @Builder public stat ...

  5. SqlService Date 格式化

    <choose> <when test="dateFlag=='day'"> ), FRI.INVOICE_DATE, ) AS CREATED_ON, & ...

  6. 2017全面JAVA面试经历总结

    https://wenku.baidu.com/view/05e8f71afbd6195f312b3169a45177232f60e474.html?from=search JAVA常见面试题及解答2 ...

  7. 到底什么是nandflash,norflash,sdram,emmc,rom,ram【转】

    本文转载自:http://blog.sina.com.cn/s/blog_6dd8f2b70101le26.html 最近被nandflash,norflash,sdram,emmc,rom,ram搞 ...

  8. POJ - 3281 Dining(拆点+最大网络流)

    Dining Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 18230   Accepted: 8132 Descripti ...

  9. [python基础] Flasky-表单WTForms支持的html字段和内建函数

    WTForms 支持的HTML 标准字段如表4-1 所示.表4-1 WTForms支持的HTML标准字段字段类型              说 明StringField           文本字段T ...

  10. Java中继承,类的高级概念的知识点

    1. 继承含义 在面向对象编程中,可以通过扩展一个已有的类,并继承该类的属性和行为,来创建一个新的类,这种方式称为继承(inheritance). 2. 继承的优点 A.代码的可重用性 B.子类可以扩 ...