supprimer les bordures autour d'entrée html

Je veux créer une fonction de recherche pour mon application web.

ici sont les regards sur FF & IE, c'est ok sans étrange frontière

Firefox

et voici le regard sur Chrome & Safari, il est étrange frontière autour de l'élément d'entrée

Chrome

supprimer les bordures autour d'entrée html

Safari

supprimer les bordures autour d'entrée html

Voici mon html & css code

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

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

supprimer les bordures autour d'entrée html

#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 faire pour supprimer cette frontière?

Avez-vous essayé d'appliquer border: none directement à #generic_search? Vous pouvez également essayer border-color: transparent juste au cas où, mais si la frontière est affiché, il faudra encore de l'espace.
il ne fonctionne pas
border: 0 devrait être suffisant, mais si ce n'est pas le cas, peut-être le bouton du navigateur par défaut de style dans interférer. Avez-vous essayé de réglage appearance à none (par exemple -webkit-appearance: none)
-webkit-appearance: none fonctionne très bien!

OriginalL'auteur Timeless | 2013-01-31

cross-browser css

37

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

OriginalL'auteur Murray Smith
11
```
border-width:0px;
border:none;
```
Fonctionnera très bien.

OriginalL'auteur Piccaza
3

Dans mon cas, je suis en utilisant un framework CSS qui ajoute box-shadow, j'ai donc dû également ajouter
```
box-shadow: none;
```
Afin de le compléter extrait est:
```
border: none; 
border-width: 0; 
box-shadow: none;
```
La droite. J'ai omis la norme des choses pour des raisons de concision, mais vous avez raison. Je vais mettre à jour la réponse pour plus de clarté. Merci.

OriginalL'auteur isapir
2

votre code ressemble à ceci jsfiddle.net/NTkGZ/

essayer
```
border:none;
```
OriginalL'auteur Pawan Lakhara

Essayer cette

#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 mal

border:none !important fonctionne sur FF62.0.2

OriginalL'auteur basarat

Vous devez vous connecter pour publier un commentaire.