Réinitialiser les Styles pour les éléments d'entrée et restyling de ramener de l'apparence par défaut

J'ai un simple champ de saisie.

<input name="1" onfocus="this.value=''" type="text" size="20" value="input 1" title="Enter your search here" />

Parce que les différents navigateurs ajout de différentes quantités de remplissage, de marge et de frontière, je dois le réinitialiser comme suit.

input
{
padding: 0;
margin: 0;
border: 0;
border: none;
}

Maintenant, j'ai un non stylé (en laissant d'autres propriétés telles que la taille de police ou d'un curseur, pour le seul mouvement) et je veux ramener le appearnce qui ont été par défaut avant de le réinitialiser mais avec de consistant, de sorte que l'aspect et les dimensions sont les mêmes dans tous les navigateurs. Je ne

input
{
border: 1px inset #F0F0F0;
}

Cependant il change quelque chose et le appearnce n'est pas le même que par ce violon où la première entrée (entrée 1) n'a pas été réinitialisé avec la frontière de la propriété tandis que la deuxième entrée (input 2) a été réinitialisée (border: 0; border: none;) et encore restylée (border: 1px inset #F0F0F0;).

jsFiddle

Comment puis-je obtenir le même aspect, de retour après l'application d'un style de réinitialisation.

OriginalL'auteur Jawad | 2012-09-10

  1. 4

    Vous ne pouvez pas obtenir les styles par défaut en arrière une fois que vous les modifiez. Si vous souhaitez normaliser les marges et padding tous les navigateurs, juste normaliser les marges et padding et ne pas toucher aux autres styles, en particulier bordure et arrière-plan.

    Mais IE s'applique 1px frontière, FF 2px et GG 3px ou quelque chose comme ça!
    C'est juste la façon dont ils le style de leurs boutons. Vous ne pouvez pas la modifier sans perdre le style par défaut parce que ce sont leurs valeurs par défaut.
    Même si je change le border-width SEULEMENT - jsfiddle.net/LJerh/3
    Oui, même si vous modifiez la largeur de la bordure. C'est juste la façon dont il fonctionne, je le crains.
    Mais vous pouvez désactiver les navigateurs WebKit, l'apparition de -webkit-appearance: none;.

    OriginalL'auteur BoltClock