Changer la lueur bleue du focus d'entrée Bootstrap

Est-ce que quelqu'un sait comment changer Bootstrap input:focus? La lueur bleue qui apparaît lorsque vous cliquez sur un inputchamp?

En fin de compte, j'ai changé l'entrée css suivante dans bootstrap.css

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);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Vous pouvez utiliser le .form-controlsélecteur pour faire correspondre toutes les entrées. Par exemple pour passer au rouge:

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

Mettez-le dans votre fichier css personnalisé et chargez-le après bootstrap.css. Il s'appliquera à toutes les entrées, y compris textarea, select etc ...

Si vous utilisez Bootstrap 3.x, vous pouvez maintenant changer la couleur avec la nouvelle @input-border-focusvariable.

Voir le commit pour plus d'informations et d'avertissements.

Dans la mise à jour _variables.scss@input-border-focus .

Pour modifier la taille / d'autres parties de cette lueur modifiez les mixins / _forms.scss

@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
  }
}

Vous pouvez modifier la .form-control:focus couleur sans modifier le style de bootstrap de cette manière:

Solution rapide

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 

Explication complète

1. Recherchez la version de bootstrapCDN que vous utilisez. Par exemple, pour moi, en ce moment, c'est 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Recherchez la classe que vous souhaitez modifier. Par exemple .form-control:focus, copiez les paramètres que vous souhaitez modifier dans votre css. Dans ce cas est border-coloret box-shadow.
3. Choisissez une couleur pour le border-color. Dans ce cas, je choisis de choisir le même vert que le bootstrap utilise pour leur .btn-successclasse, en recherchant cette classe particulière dans la page bootstrap.css mentionnée à l'étape 1.
4. Convertissez la couleur que vous avez choisie en RVB et ajoutez-la au box-shadowparamètre sans modifier le quatrième paramètre RVBA (0,25) que le bootstrap a pour la transparence.

Pour la version bêta de Bootstrap v4.0.0, vous aurez besoin des éléments suivants ajoutés à une feuille de style qui remplace Bootstrap (soit ajouter après le lien CDN / local vers bootstrap v4.0.0 beta, soit ajouter !importantaux styles:

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

Remplacez la couleur de la bordure et le rgba sur l'ombre de la boîte par le style de couleur que vous souhaitez *.

Dans Bootstrap 4, si vous compilez SASS vous-même, vous pouvez modifier les variables suivantes pour contrôler le style de l'ombre de focus:

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

Remarque: depuis Bootstrap 4.1, les variables $input-btn-focus-coloret $input-btn-focus-box-shadowne sont utilisées que pour les éléments d'entrée, mais pas pour les boutons. L'ombre de focus pour les boutons est codée en dur comme box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, vous ne pouvez donc contrôler la largeur de l'ombre que via la $input-btn-focus-widthvariable.

Voici les modifications si vous souhaitez que Chrome affiche le contour "jaune" par défaut de la plate-forme.

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: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}

Pour désactiver la lueur bleue (mais vous pouvez modifier le code pour changer la couleur, la taille, etc.), ajoutez ceci à votre css:

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

Voici une capture d'écran montrant l'effet: avant et après:

J'ai atterri sur ce fil à la recherche du moyen de désactiver complètement la lueur. De nombreuses réponses étaient trop compliquées pour mon propos. Pour une solution simple, j'avais juste besoin d'une ligne de CSS comme suit.

input, textarea, button {outline: none; }

Ajoutez un identifiant à la balise body. Dans votre propre Css (pas le bootstrap.css), pointez sur le nouvel ID de corps et définissez la classe ou la balise que vous souhaitez remplacer et les nouvelles propriétés. Vous pouvez désormais mettre à jour bootstrap à tout moment sans perdre vos modifications.

fichier html:

  <body id="bootstrap-overrides">

fichier css:

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Voir aussi: meilleur moyen de remplacer le bootstrap css

En fait, dans Bootstrap 4.0.0-Beta (à partir d'octobre 2017), l'élément d'entrée n'est pas référencé par input [type = "text"] , toutes les propriétés Bootstrap 4 pour l'élément d'entrée sont en fait basées sur un formulaire .

Il utilise donc les styles .form-control: focus . Le code approprié pour la mise en évidence "sur focus" d'un élément d'entrée est le suivant:

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

Assez facile à implémenter, changez simplement la propriété border-color .

En me basant sur la réponse de @ wasinger ci-dessus, dans Bootstrap 4.5, j'ai dû remplacer non seulement les variables de couleur, mais également elles- box-shadowmêmes.

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;

Dans Bootstrap 3.3.7, vous pouvez modifier la valeur @ input-border-focus dans la section Forms du personnalisateur:

Pour la bordure d'entrée avant le focus. Vous pouvez spécifier votre couleur préférée que vous souhaitez utiliser et d'autres css comme le remplissage, etc.

.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

Lorsque nous nous concentrons sur l'entrée. Vous pouvez spécifier votre contour de couleur préféré que vous souhaitez

.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}

Si vous souhaitez supprimer complètement l'ombre, ajoutez la classe shadow-noneà votre élément d'entrée.

Pourquoi ne pas simplement utiliser?

 input:focus{
        outline-color : #7a0ac5;
    }

Je n'ai pas pu résoudre cela avec CSS. Il semble que Boostrap ait le dernier mot, même si je l'ai fait par site.css après le bootstrap. En tout cas, cela a fonctionné pour moi.

$(document).ready(function () {
    var elements = document.getElementsByClassName("form-control");

    Array.from(elements).forEach(function () {
        this.addEventListener("click", cbChange, false);
    })

    });

function cbChange(event) {
    var ele = event.target;
    var obj = document.getElementById(ele.id);
    obj.style.borderColor = "lightgrey";
}

Plus tard, j'ai trouvé que cela fonctionnait dans le css. Evidemment avec les contrôles de formulaire uniquement

.form-control.focus, .form-control:focus {
    border-color: gainsboro;
} 

Voici les photos avant et après de l'outil Chrome Developer. Remarquez la différence de couleur de bordure entre la mise au point activée et la mise au point désactivée. Sur une note latérale, cela ne fonctionne pas pour les boutons. Avec des boutons. Avec les boutons, vous devez changer la propriété du contour en aucune.

Cela fonctionnera à 100%, utilisez ceci:

.form-control, .form-control:focus{
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
   border: rgba(255, 255, 255, 0);
}