web-dev-qa-db-fra.com

Comment supprimer le style de chrome par défaut pour l'entrée?

Comment puis-je supprimer la bordure par défaut de la boîte jaune de l'entrée Sélectionnée et sélectionner des champs chromés ou tout autre navigateur tel que Safari? Comment puis-je supprimer la bordure de sélection du navigateur par défaut?

htmlcsshtml5css3
39
monk
-webkit-appearance: none;

et ajoutez votre propre style

74
Sowmya
textarea, input { outline: none; }

via https://stackoverflow.com/a/935572/1036298

30
Nithin Emmanuel

Mixin pour moins

.appearance (@value: none) {
    -webkit-appearance:     @value;
    -moz-appearance:        @value;
    -ms-appearance:         @value;
    -o-appearance:          @value;
    appearance:             @value;
}
9
Pesulap

Dans votre CSS, ajoutez ceci:

input {-webkit-appearance: none; box-shadow: none !important; }
:-webkit-autofill { color: #fff !important; }

Seulement pour Chrome! :)

6
Praveen Kumar Purushothaman

utiliser un code simple pour supprimer le style de navigateur par défaut pour les contours

input { outline: none; }
4
Behnam Mohammadi

entrée: -webkit-autofill { arrière-plan: #fff! important; }

2
supersaiyan

Lorsque vous regardez une entrée avec un type de nombre, vous remarquerez les boutons fléchés (haut/bas) situés à droite du champ de saisie. Ces fileuses n'étant pas toujours souhaitables, le code ci-dessous supprime ce style pour restituer une entrée qui ressemble à celle d'une entrée avec un type de texte.

enter image description here

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}
1
Keith Gulbro

Parlez-vous lorsque vous cliquez sur une zone de saisie plutôt que de la survoler? Cela a résolu le problème pour moi:

input:focus {
   outline: none;
   border: specify yours;
}
0
Adam