Forum : Conflit focus input bootstrap Twitter

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;
}

ClementParis

Réponse acceptée

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

Inspirat

Réponse acceptée

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

Auteur

Réponse acceptée

Bonsoir,

Le problème venait bien de:

outline: none;

Que je ne connaissais pas :)

Lartak

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 ?

Conflit focus input bootstrap Twitter

4 réponses