删除HTML输入周围的边框
问题描述:
我要为我的网络应用程序创建一个搜索功能。
I want to create a search function for my web app.
这里是FF& IE,确定没有奇怪的边框
here are the looks on FF & IE, it is ok without strange border
Firefox
IE
这里是外观在Chrome和Safari,它在输入元素周围有奇怪的边框
and here are the look on Chrome & Safari, it has strange border around the input element
Chrome
Safari
这是我的html& css code
Here is my html & css code
<input type="search" id="generic_search" onkeypress="return runScript(event)" />
<input type="button" id="generic_search_button" />
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;
}
如何删除该边框?
答
border:0
应该就足够了,但如果不是,可能是按钮的浏览器默认样式干扰。您尝试将外观
设置为 none
(例如 -webkit- appearance:none
)
border: 0
should be enough, but if it isn't, perhaps the button's browser-default styling in interfering. Have you tried setting appearance
to none
(e.g. -webkit-appearance: none
)