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:@ ...
随机推荐
- C#和JAVA中编写事务代码
C# DAL层代码,运行多条增删改,使用事务操作: /// <summary> /// 运行 多条增删改 (非查询语句) /// </summary> /// <par ...
- UNIX环境高级编程之第3章:文件I/O
3.1 引言 文件I/O函数:打开文件,读文件,写文件 经常使用到五个函数:open, read, write, lseek, close. 本章描写叙述的函数都是:不带缓冲的I/O(unbuffer ...
- CAS 4.0 配置开发手冊
1 下载 地址http://downloads.jasig.org/ cas-server-4.0.0-release.tar.gz cas-client-3.3.3-release.tar.g ...
- Codeforces--630K--Indivisibility(容斥)
K - Indivisibility Crawling in process... Crawling failed Time Limit:500MS Memory Limit:65536 ...
- B3403 [Usaco2009 Open]Cow Line 直线上的牛 deque
deque真的秀,queue和stack...没啥用了啊.操作差不多,就是在前面加一个front||back_就行了. 题干: 题目描述 题目描述 约翰的N只奶牛(编为1到N号)正在直线上排队 ...
- Largest Rectangle in a Histogram(dp)
http://acm.hdu.edu.cn/showproblem.php?pid=1506 题意:给出n个矩形的高度,每个矩形的宽都为1,求相邻的矩形能组合成的最大的矩形的面积. 思路:求出比第i个 ...
- php导出mysql源码
件名:db_backup.php 源代码如下: 复制代码 代码如下: <?php ini_set("max_execution_time", "180") ...
- mysql如何查询最新插入的数据
在MySQL中,使用auto_increment类型的id字段作为表的主键,并用它作为其他表的外键,形成“主从表结构”,这是数据库设计中常见的用法.但是在具体生成id的时候,我们的操作顺序一般是:先在 ...
- Python 41 多表查询 和 子查询
1.查询 完整的查询语句 select [distinct] {* | 字段 | 聚合函数 | 表达式}from 表名 ...
- 运行Django项目指定IP和端口
默认IP和端口 python manage.py runserver 指定端口: python manage.py runserver 192.168.12.12:8080 此时会报错,我们需要修改配 ...