Удалить границы вокруг ввода html

Я хочу создать функцию поиска для своего веб-приложения.

вот посмотрите на FF и IE, это нормально без странной границы

Firefox

enter image description here

IE

enter image description here

и вот взгляд на Chrome и Safari, у него странная граница вокруг элемента ввода

Хром

enter image description here

Сафари

enter image description here

Вот мой код html и css

<input type="search" id="generic_search" onkeypress="return runScript(event)" />
<input type="button" id="generic_search_button" />

border:0 применяется ко всем элементам

enter image description here

#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;
}

Как удалить эту границу?

Ответы

Ответ 1

border: 0 должно быть достаточно, но если это не так, возможно, стиль браузера с настройками браузера в интерферировании. Пробовали ли вы настройку appearance на none (например, -webkit-appearance: none)

Ответ 2

border-width:0px;
border:none;

Будет работать нормально.

Ответ 3

ваш код выглядит следующим образом jsfiddle.net/NTkGZ/

попробуйте

border:none;

Ответ 4

В моем случае я использую фреймворк CSS, который добавляет box-shadow, поэтому мне пришлось добавить

box-shadow: none;

Итак, полный фрагмент:

border: none; 
border-width: 0; 
box-shadow: none;

Ответ 5

используйте это, я надеюсь, что эта помощь будет полезной для вас... border: none! important; цвет фона: прозрачный;

попробуйте это

<div id="generic_search"><input type="search" onkeypress="return runScript(event)" /></div>
<button type="button" id="generic_search_button" /></button>

Ответ 6

Попробуйте это

#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;
}

Я думаю, что размер изображения может быть неправильным