您的位置：首页 > Web前端 > CSS

去除input边框 input去除边框去除input获取焦点时的蓝色外边框

2017-05-12 18:34 260 查看

去除input边框

input去除边框

去除input框获取焦点时的蓝色外边框

@ sunRainAmazing

**

去除input的边框仅仅用border属性，其实是不能满足我们的需求的

此外还需要加上outline属性才可以实现我们想要的样式

**

去除边框的代码 border-width:0; 即可去除相应的周围的边框

但是实际，并不能达到我们想要的效果，

而appearance:none;也不能达到我们想要的效果。

如下图展示：

边框input3 获取焦点的样式

很明显，有一个淡蓝色的外边框在上面

因此，需要添加 ,去除input的外边线框，如下

原文连接

outline：none

或

outline:medium;

源码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>去除input的边框</title>
<style>
input{text-indent: 1em;}
#search1{ }
#search2{ border-width: 0; }
#search3{ border:1px solid red; }
#search4{ outline:medium;}
/*获取焦点时 外边框显示红色*/
#search4:focus{ border:1px solid red; }
#search5:focus{ border:1px solid red; }
#search5: { appearance: none; }

</style>
</head>
<body>
<br/>
<input type="text" id="search1" name="search"
placeholder="请输入搜索内容1" />

<input type="text" id="search2" name="search"
placeholder="请输入搜索内容2" /> <br/><br/>

<input type="text" id="search3" name="search"
placeholder="请输入搜索内容3" />

<input type="text" id="search4" name="search"
placeholder="请输入搜索内容4" /> <br/><br/>

<input type="text" id="search5" name="search"
placeholder="请输入搜索内容5" /> <br/><br/>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 需求 input-CSS

相关文章推荐

新的分享

章节导航

去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

去除input边框 input去除边框去除input获取焦点时的蓝色外边框