删除HTML输入周围的边框 [英] remove borders around html input

问题描述

我要为我的网络应用程序创建一个搜索功能。

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)

这篇关于删除HTML输入周围的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！