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. 【转】C语言条件编译及编译预处理阶段

    原文: http://www.cnblogs.com/rusty/archive/2011/03/27/1996806.html 1. 宏定义(宏代换,宏替换,宏: 宏定义是C语言提供的3中预处理功能 ...

  2. [Java][Spring][scurity]同步session控制,防止一个用户多次登录

    [Spring][scurity]同步session控制.防止一个用户多次登录 假设你希望限制单个用户仅仅能登录到你的程序一次,Spring Security通过加入以下简单的部分支持这个功能. 1. ...

  3. 工作easy,赚钱非常难

    李宗盛有首歌的歌词里写到:「工作是easy的,赚钱是困难的」. 乍一听感觉有点矛盾,工作的一个重要结果不就是赚钱么,为什么工作easy赚钱却难?但细致一想就恍然当中想表达的意思了. 工作的本质是出售劳 ...

  4. android 通用菜单条实现(一)

    一.前言介绍 直奔主题啦,非常多Android app都有菜单条.菜单条除了背景图片.图标的不同外,布局基本一致.大致能够分为三部分:菜单条的左側区域.菜单条中间区域.菜单条右側区域. 为了考虑代码的 ...

  5. 翻翻git之---自己定义邮件发送buttonSendButton(流程分析,实现思路能够学习下)

    转载请注明出处:王亟亟的大牛之路 距离过春节还有1天.继续这一系列的git翻料之旅. 昨天的工具类真的非常棒,这里再推崇一下 传送门:http://blog.csdn.net/ddwhan0123/a ...

  6. 虚拟机 开发板 PC机 三者之间不能ping通的各种原因分析

    这个问题事实上也相对照较简单.可是非常多网友都给我发消息说 遇到不能ping,每一个人都得回答一次确实显得心有余而力不足.如今我对遇到这几种问题给出最完整的解决方式. (说实话基本上也仅仅要这几种可能 ...

  7. Android 下使用opencv

    两种方式: 1.java API 2.Native/C++ 方式,OpenCV.mk中默认使用动态库的方式链接opencv,设置OPENCV_LIB_TYPE:=STATIC 以静态库方式调用 htt ...

  8. SQL SERVER的整型运算,让人大吃一惊

    SQL SERVER的整型运算,让人大吃一惊好比下面代码:DECLARE @i INT = 50;DECLARE @dec DECIMAL(18,4);SET @dec = @i / 100;SELE ...

  9. jQuery - 当当网我的订单页

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

  10. 多线程编程和Java网络编程

    1. 线程概述 多任务处理有两种类型:基于进程.基于线程(进程是指一种“自包容”的运行程序,有自己的地址空间; 线程是进程内部单一的一个顺序控制流) 基于进程的特点是允许计算机同时运行两个或更多的程序 ...