Conflit focus input bootstrap Twitter

Par vavoir, il y a 11 ans

Les bases HTML/CSS

Bonsoir,

Petit conflit de CSS avec le bootstrap Twitter. En effet je ne parvient pas à retirer la bordure bleu lorsque qye l'on cliquer sur un champ de type input mon CSS:

.page-left input[type="text"], .page-left input[type="text"]:focus{ width: 100%; height: 30px; line-height: 30px; margin: 0 0 20px 0; padding: 0 20px; border: 0 solid #fff; }

4 réponses

Lartak, il y a 11 ans

Bonjour.
Le code que tu nous montre, il est dans un fichier css, ou directement sur la page du formulaire ?
S'il est dans un fichier css, est-ce que tu l'appelles bien après celui de bootstrap ?

ClementParis, il y a 11 ans

Tu es sûr que c'est une bordure et pas un box-shadow ou un outline CSS ?

Inspirat, il y a 11 ans

Comme le dit ClementParis, il s'agît sans doute de la propriété "box-shadow" ou "Outline" de CSS qui par défaut, selon le navigateur, englobe le champ/bouton sélectionné. Pour résoudre ça, il suffit de modifier ton style CSS de la façon suivante:

.page-left input[type="text"], .page-left input[type="text"]:focus{ width: 100%; height: 30px; line-height: 30px; margin: 0 0 20px 0; padding: 0 20px; border: none; /* L'ajout nécessaire */ outline: none; box-shadow: none; }
vavoir, il y a 11 ans

Bonsoir,

Le problème venait bien de:

outline: none;

Que je ne connaissais pas :)