web-dev-qa-db-fra.com

Twitter Bootstrap - Comment faire pour supprimer le contour bleu de l'option Select

Pouvez-vous s'il vous plaît jeter un coup d'œil à cet exemple et laissez-moi savoir comment je peux me débarrasser de ce contour bleu pour le bouton de sélection déroulant et de la boîte de recherche dans le menu déroulant (voir l'image ci-dessous)?

enter image description here

J'ai déjà essayé:

.btn-default {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
}
input, textarea, select, a { outline: none !important; }
input:focus, textarea:focus, select:focus{ outline: none; }

mais ils ne font pas le tour!

csscss3twitter-bootstrap-3
9
Mona Coder

Les éléments d'entrée de formulaire d'amorçage n'utilisent pas la propriété outline, mais le recréent à l'aide de box-shadow. Vous étiez sur la bonne voie avec ce que vous faisiez, mais le style qui en découle est le suivant:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

Vous voudrez remplacer ces styles par les vôtres en définissant le box-shadow sur none et en ajustant le border-color pour qu'il corresponde à votre valeur par défaut.

En ce qui concerne la zone de sélection, vous pouvez utiliser le style suivant, tel que mentionné à l'origine par @ kamlesh-kushwaha, pour remplacer le paramètre bootstrap:

.bootstrap-select .btn:focus {
    outline: none !important;
}
19
Blake Mann

Vous pouvez utiliser input[type] {}

Tous les types d’entrée bootstrap comme ci-dessous

textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus, 
.uneditable-input:focus {   
    border-color: rgba(126, 239, 104, 0.8);
    /* give your style */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(255, 0, 0, 0.6);
    /* give your style */
    outline: 0 none;
    /* give your style */
}

select:focus {
   outline-color: transparent;
}
3
4dgaurav

Ajoutez la règle css focus ou modifiez celle existante.

.bootstrap-select .btn:focus{outline:none!important;}

De même, vous pouvez ajouter pour select

3
K K

Pour la liste déroulante <select>, modifiez bootstrap-select.min ligne 29:

.bootstrap-select .dropdown-toggle:focus {
    outline: thin dotted #333 !important;
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;}

à:

.bootstrap-select .dropdown-toggle:focus {
    outline: none!important;
}
2
Sebastian

Je supprime Bootstrap 4 dropdown-toggle 'on click', les bordures bleues en faisant ceci:

.yourdivname:focus {
  box-shadow: none;
}

Tout le reste semblait être hors de propos. Par exemple, avec les boutons normaux, vous avez toujours semblé que cela fonctionne, mais pas pour cet élément. Tout ce qui était nécessaire était la boîte-ombre: aucune propriété.

0
Gmoney Mozart