supprimer l'ombre interne du texte saisi

Question

Donc j'ai une entrée de texte, j'utilise html5, sur chrome, et je veux changer l'apparence d'une entrée de texte, j'ai enlevé le contour sur le focus (orange sur chrome), j'ai mis l'arrière-plan à une couleur claire #f1f1f1 mais maintenant il y a comme une bordure plus épaisse en haut et à gauche, comme si c'était pour avoir l'air enfoncé, quand il n'y a pas de changement de couleur d'arrière-plan cela n'arrive pas. Comment puis-je l'enlever ? Désolé, je ne peux pas fournir d'image, j'utilise un appareil mobile.

Cela se produit sur chrome, ie, et Firefox, je ne peux pas tester les autres.

Answer 1

Essayez ceci
outline: none;

Démonstration en direct https://codepen.io/wenpingguo/pen/KQgbXq

Answer 2

Tous les navigateurs, y compris Safari (+ mobile) :

input[type=text] {   
    /* Remove */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Optional */
    border: solid;
    box-shadow: none;
    /*etc.*/
}

Answer 3

Je travaille sur firefox. et j'ai eu le même problème, le texte de type input est auto-défini quelque chose qui ressemble à un boxshadow inset, mais ce n'est pas le cas. Il n'y a pas d'autre solution que de changer la bordure... il suffit de définir border:0; et vous avez terminé.

Answer 4

Voici un petit extrait qui pourrait être intéressant à essayer :

input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}

noter que : border-style supprime l'ombre intérieure.

input {
    border-radius: 10px;
    border-color: violet;
    border-style: solid;
  }

<input type="text"/>