浏览器双击选中文字
body{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
a标签默认样式
a,a:link,a:visited,a:hover,a:active{
text-decoration: none;
color:inherit;
}
input默认样式
input{
background:none;
outline:none;
border:none;
}
/*获得焦点之后取掉默认的蓝色选中框*/
input:focus{
border-radius: 5px;
border: 1px solid #ccc;
}
默认checkbox样式修改
/*html部分:*/
<div class="remPwd">
<input type="checkbox" id="checkboxLogin" />
<label for="checkboxLogin">记住密码</label>
</div>
/*css部分:*/
.remPwd input[type=checkbox] + label::before {
content: "\a0"; /* 不换行空格 */
display: inline-b
vertical-align: 2px;
width: 14px;
height: 14px;
margin-right: 5px;
border-radius: 3px;
border:1px solid #68c6db;
cursor: pointer;
text-indent: 2px;
line-height: .65; /* 行高不加单位,子元素将继承数字乘以自身字体尺寸而非父元素行高 */
}
.remPwd input[type="checkbox"]:checked + label::before {
ontent: "\2713"; /* 对号的 Unicode 编码 */
color: #68c6db; /* 选中的背景颜色 */
cursor: pointer;
}
.remPwd input[type='checkbox'] {
/* 隐藏掉原先实际的 checkbox 框,之所以没用 display:none; 这种简单直接的方式,
是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除 */
position: absolute;
clip:rect(0,0,0,0); /* 隐藏方式一:裁剪为0 */
/* visibility: hidden; */ /* 隐藏方式二:隐藏属性 */
}
button的disabled样式
button{
margin-left: 10px;
border-radius: 5px;
height: 28px;
background-color: #0e85e6;
color: #fff;
border: 1px solid #0e85e6;
text-shadow: none;
box-shadow: none;
}
button[disabled] {
background: #89caff;
border-color:#89caff;
}
Continue...
网友评论