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. D. Multiplication Table 二分查找

    刚做这道题根本没想到二分,最关键是没想出来怎样统计在这个矩阵中比一个数小的有几个怎么算.造成自己想了好久最后看了别人的提示才做出来.哎.好久不做题太弱了 #include<iostream> ...

  2. Android 线程 Looper.prepare()、Looper.loop() 使用

    优化项目过程中发现了一个非常Low的问题,整理一下.备忘: 说问题之前先看下HandlerThread的定义 一个封装了looper的线程:   Looper用于封装了android线程中的消息循环. ...

  3. Building Maintainable Software-java篇之Couple Architecture Components Loosely

    Building Maintainable Software-java篇之Couple Architecture Components Loosely There are two ways of co ...

  4. HDU 3656 二分+dlx判定

    Fire station Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  5. Codeforces Round #257 (Div. 2/B)/Codeforces450B_Jzzhu and Sequences

    B解题报告 算是规律题吧,,,x y z -x -y -z 注意的是假设数是小于0,要先对负数求模再加模再求模,不能直接加mod,可能还是负数 给我的戳代码跪了,,. #include <ios ...

  6. luogu1064 金明的预算方案

    这道题我就想说一点:审题!附件只有2个!钱是10的整数倍,不是100的整数倍! #include <cstdio> #include <cstring> #include &l ...

  7. B1041 [HAOI2008]圆上的整点 数学

    这个题一开始看着没什么思路,但是一看题解就明白了不少,主要是数学证明,代码很好写. 贴个网址: hzwer 题干: 题目描述 求一个给定的圆(x^+y^=r^),在圆周上有多少个点的坐标是整数. 输入 ...

  8. Coursera Algorithms week2 基础排序 练习测验: Intersection of two sets

    题目原文: Given two arrays a[] and b[], each containing n distinct 2D points in the plane, design a subq ...

  9. E20170821-mk

    Dimension   n. 尺寸; [复] 面积,范围; [物] 量纲; [数] 次元,度,维;

  10. 安装DotnetCore-Vue项目模板

    dotnet new --install Microsoft.AspNetCore.SpaTemplates::*