web-dev-qa-db-fra.com

supprimer les bordures autour de l'entrée HTML

Je souhaite créer une fonction de recherche pour mon application Web.

voici les regards sur FF & IE, ça va sans bordure étrange

Firefox

enter image description here

IE

enter image description here

et voici le look sur Chrome & Safari, il a une bordure étrange autour de l'élément

Chrome

enter image description here

Safari

enter image description here

Voici mon code html et css

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

le border:0 a été appliqué à tous les éléments

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

Comment supprimer cette bordure?

csscross-browser
15
Timeless

border: 0 devrait suffire, mais si ce n'est pas le cas, peut-être le style par défaut du bouton pour interférer. Avez-vous essayé de définir appearance à none (par exemple -webkit-appearance: none)

38
Murray Smith
border-width:0px;
border:none;

Cela fonctionnera bien.

12
Dipak

Dans mon cas, j’utilise un framework CSS qui ajoute box-shadow; 

box-shadow: none;

Donc, l'extrait complet est:

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

votre code ressemble à ceci jsfiddle.net/NTkGZ/

essayer 

border:none;
2
Pawan Lakhara

Essaye ça 

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

Je pense que la taille de l'image peut être fausse 

1
basarat

j'espère que cette aide vous sera utile .... frontière frontière: aucune! important; couleur de fond: transparent;

essaye ça

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