前言：
现时朋友们对“html表单边框颜色”大致比较注意，同学们都需要知道一些“html表单边框颜色”的相关资讯。那么小编同时在网上汇集了一些有关“html表单边框颜色””的相关文章，希望咱们能喜欢，你们一起来了解一下吧！轮廓线(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> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html表单边框颜色 #css3表单美化 #css美化input
