轮廓线(outstyle)
比较常见于表单和链接等 。
outline-style:none; 取消谷歌、360等蓝色边框
:focus 获得焦点的状态, 鼠标的光标就是焦点
.username:focus{ /*获得焦点的状态*/
border:1px dashed pink;
background-color:#FFF7FB;
color:pink;
}取消表单边框
因为表单在不同浏览器里面, 以后不同的显示方式。
所以, 一般情况下, 我们会把所有的表单都去掉边框。
border: 0 none; 兼容性更好的写法Label 标签
<label for="txt">搜索一下</label>: <input type="text" id="txt" class="search" value="请输入..." />这样, 我们点击搜索一下, 光标就跳到了相应id的 input 里面了
完整实例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单美化</title>
<style type="text/css">
input{
width:150px;
height:18px;
outline-style:none; /*取消蓝色边框*/
}
.username{
border:1px dashed #ccc;
background-color:#E7EEFE;
color:blue;
}
.username:focus{ /*获得焦点的状态*/
border:1px dashed pink;
background-color:#FFF7FB;
color:pink;
}
.email{
border:0 none; /*取消表单边框, 兼容性更好的写法*/
border-bottom:1px dashed red;
}
.search{
border:1px solid #ccc;
color:#ccc;
background:url(search.png) no-repeat right center;
}
</style>
</head>
<body>
用户名: <input type="text" class="username" /><br />
<br />
邮 箱: <input type="text" class="email"/><br />
<br />
<label for="txt">搜索一下</label>: <input type="text" id="txt" class="search" value="请输入..." />
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)