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:@ ...
随机推荐
- hdu1595find the longest of the shortest 最短路
//给一个无向图,问删除一条边,使得从1到n的最短路最长 //问这个最长路 //这个删除的边必定在最短路上,假设不在.那么走这条最短路肯定比其它短 //枚举删除这条最短路的边,找其最长的即为答案 #i ...
- 关于PHP会话:session和cookie
会话处理解决什么问题 HTTP(超文本传输协议)定义了通过万维网(WWW)传输文本.图形.视频和全部其它的数据的规则.HTTP是一种无状态协议,每次请求的处理,都与之前和之后的请求无关. 会话处理是这 ...
- 你不知道的JavaScript--Item33 跨域总结与解决的方法
一.神马是跨域(Cross Domain) 说白点就是post.get的url不是你当前的站点,域名不同.比如在*aaa.com/a.html*里面,表单的提交action是bbb.com/b.htm ...
- nginx启动访问
修改配置文件后,查看配置是否ok 以下是有错误的 以下是ok的 nginx/sbin/nginx -t 启动查询: /usr/local/nginx/sbin/nginx -c /usr/local/ ...
- 使用tortoisegit修改日志
http://stackoverflow.com/questions/17647936/how-do-i-edit-an-incorrect-commit-message-with-tortoiseg ...
- # --with-http_random_index_module模块
作用: 从目录中随机选取一个随机作为主业 环境 nginx -V 检测是否已经安装了该模块 语法 案例 在/usr/share/nginx下随机创建3个html文件 修改配置文件
- MessageDigest 加密和解密2
package com.drawthink.platform.util; import java.security.MessageDigest; import java.security.NoSuch ...
- MEF编程模型
Contract由Contract name和Contract type组成,Contract两个参数可以省略可以implicit也可以explicit,implicit时name和type会自动推断 ...
- 使用TortoiseSVN碰到的几个问题(2)-冲突解决, 图标重载
8)解决冲突 冲突分为两种:文件冲突---当两名(或更多)开发人员修改了同一个文件中相邻或相同的行时就会发生文件冲突.下面的属性冲突应该也属于文件冲突. 树冲突---当一名开发人员移动.重命名.删除一 ...
- ThreadPoolExecutor理解
ThreadPoolExecutor组成 ThreadPoolExecutor的核心构造函数: public ThreadPoolExecutor(int corePoolSize, int maxi ...