CSS 移除 html 输入周围的边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14618028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove borders around html input
提问by Timeless
I want to create a search function for my web app.
我想为我的网络应用程序创建一个搜索功能。
here are the looks on FF & IE, it is ok without strange border
这是FF和IE上的外观，没有奇怪的边框就可以了
Firefox
火狐
IE
IE
and here are the look on Chrome & Safari, it has strange border around the input element
这是在 Chrome 和 Safari 上的外观，它在输入元素周围有奇怪的边框
Chrome
铬合金
Safari
苹果浏览器
Here is my html & css code
这是我的 html 和 css 代码
<input type="search" id="generic_search" onkeypress="return runScript(event)" />
<input type="button" id="generic_search_button" />
the border:0has been applied to all elements
该border:0已被应用到的所有元素
#generic_search
{
font-size: 14px;
width: 250px;
height: 25px;
float: left;
padding-left: 5px;
padding-right: 5px;
margin-top: 7px;
}
#generic_search_button
{
float: left;
width: 25px;
height: 25px;
margin-top: 7px;
cursor: pointer;
background-color: White;
background-image: url(/Images/search.png);
background-repeat: no-repeat;
background-position: center center;
}
How to remove that border?
如何去除那个边框？
回答by Murray Smith
border: 0should be enough, but if it isn't, perhaps the button's browser-default styling in interfering. Have you tried setting appearanceto none(e.g. -webkit-appearance: none)
border: 0应该足够了，但如果不是，则按钮的浏览器默认样式可能会干扰。你有没有试过设置appearance为none（例如-webkit-appearance: none）
回答by Dipak
border-width:0px;
border:none;
Will work fine.
会工作得很好。
回答by isapir
In my case I am using a CSS framework which adds box-shadow, so I had to also add
就我而言，我使用的 CSS 框架添加了box-shadow，所以我还必须添加
box-shadow: none;
So the complete snippet is:
所以完整的片段是：
border: none;
border-width: 0;
box-shadow: none;
回答by Sina Kuhestani
It's simple
这很简单
input {border:0;outline:0;}
input:focus {outline:none!important;}
回答by Pawan Lakhara
回答by basarat
Try this
尝试这个
#generic_search_button
{
float: left;
width: 24px; /*new width*/
height: 24px; /*new width*/
border: none !important; /* no border and override any inline styles*/
margin-top: 7px;
cursor: pointer;
background-color: White;
background-image: url(/Images/search.png);
background-repeat: no-repeat;
background-position: center center;
}
I think the image size might be wrong
我认为图像大小可能有误
回答by Vbiz Solutions
use this i hope this help ful to you... border:none !important; background-color:transparent;
使用这个我希望这对你有帮助...边界：无！重要；背景颜色：透明；
try this
尝试这个
<div id="generic_search"><input type="search" onkeypress="return runScript(event)" /></div>
<button type="button" id="generic_search_button" /></button>
