web-dev-qa-db-fra.com

supprimer l'ombre interne de la saisie de texte

Donc, j'ai une entrée de texte, en utilisant html5, sur chrome, et je veux changer l'apparence d'une entrée de texte, j'ai supprimé le contour sur le focus (orange sur chrome), je règle l'arrière-plan sur une couleur claire #f1f1f1 _ mais il y a maintenant une bordure plus épaisse en haut et à gauche, comme si elle était censée paraître enfoncée; sans changement de la couleur de fond, cela ne se produit pas. Comment puis-je l'enlever? Désolé, je ne peux pas fournir d'image sur un appareil mobile.

Cela se produit sur chrome, c’est-à-dire que Firefox ne peut en tester d’autres.

htmlcsscss3input
60
FabianCook

border-style:solid; remplacera le style inset. Quel est ce que vous avez demandé.

border:none enlèvera la bordure tous ensemble.

border-width:1px le configurera pour être un peu comme avant le changement de fond.

border:1px solid #cccccc est plus spécifique et applique les trois, largeur, style et couleur.

Exemple: https://jsbin.com/quleh/2/edit?html,output

111
Anthony Hatzopoulos

Voici la solution pour le safari mobile:

-webkit-apparence: aucun;

comme suggéré ici: Supprimez l'ombre intérieure de textarea sur Mobile Safari (iPhone)

32
Owen

Aucune de la solution ne fonctionne actuellement. Voici ma solution. Vous pouvez ajouter des préfixes.

box-shadow: inset 0px 0px 0px 0px red;
24
atilkan

Ajouter border: none ou border: 0 pour supprimer la bordure, ou border: 1px solid #ccc pour rendre la bordure mince et plate.

Pour supprimer le remplissage des fantômes dans Firefox, vous pouvez utiliser ::-moz-focus-inner:

::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Voir démo en direct .

17
Marat Tanalin

Ensemble border: 1px solid black pour que tous les côtés soient égaux et suppriment tout type de bordure personnalisée (autre que solide). De plus, définissez box-shadow: none pour supprimer toute ombre incrustée qui lui est appliquée.

10
Erick Petrucelli

Essaye ça
outline: none;

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

2
user1506075

Je travaille sur Firefox. et j'avais le même problème, le texte de type d'entrée est défini automatiquement, quelque chose qui ressemble à un encadré, mais ce n'est pas le cas. le que vous voulez changer est frontière ... il suffit de régler border:0; et tu as fini.

0
vincent thorpe