web-dev-qa-db-fra.com

Changer Bootstrap _ entrée focale bleue lueur

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

htmlcsstwitter-bootstrap
170
PacketPimp

Finalement, j'ai modifié 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;
}
202
PacketPimp

Vous pouvez utiliser le sélecteur .form-control pour faire correspondre toutes les entrées. Par exemple, changer en 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. Cela s'appliquera à toutes les entrées, y compris textarea, select etc ...

156
igaster

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

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

Dans _ variables.scss mettez à jour @input-border-focus.

Pour modifier la taille/d'autres parties de cette lueur, modifiez le 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);
  }
}
58
Nate T

enter image description hereenter image description here

Vous pouvez modifier la couleur .form-control:focus sans modifier le style bootstrap de cette façon:

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. E.g. pour moi en ce moment est 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
  2. Recherchez la classe que vous souhaitez modifier. E.g. .form-control:focus et copiez les paramètres que vous souhaitez modifier dans votre css. Dans ce cas, border-color et box-shadow.
  3. Choisissez une couleur pour le border-color. Dans ce cas, je choisis le vert que le bootstrap utilise pour sa classe .btn-success, en recherchant cette classe dans la page bootstrap.css mentionnée dans l'étape 1.
  4. Convertissez la couleur que vous avez sélectionnée en RVB et ajoutez-la au paramètre box-shadow sans modifier le quatrième paramètre RGBA (0.25) que bootstrap a pour la transparence.
13
dcx86

Pour la version bêta de Bootstrap v4.0.0, vous devez ajouter les éléments suivants à une feuille de style remplaçant Bootstrap (soit ajouté après le lien CDN/local vers bootstrap v4. 0.0 beta ou ajoutez !important aux styles:

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

Remplacez la bordure-couleur et la rgba de la boîte-ombre par le style de couleur de votre choix *.

13
user7179686

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

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

$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: à partir de Bootstrap 4.1, les variables $input-btn-focus-color et $input-btn-focus-box-shadow ne sont utilisées que pour les éléments d'entrée, mais pas pour les boutons. L'ombre sélectionnée pour les boutons est codée en dur en tant que box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);. Vous ne pouvez donc contrôler la largeur de l'ombre qu'à l'aide de la variable $input-btn-focus-width.

10
wasinger

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: enter image description hereenter image description here

6
radhoo

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

input, textarea, button {outline: none; }
6
massanishi

En fait, dans Bootstrap 4.0.0-Beta (octobre 2017), l'élément d'entrée n'est pas référencé par input [type = "text"], tout Bootstrap 4 propriétés de l'élément d'entrée sont en réalité form.

Donc, il utilise les styles . Form-control: focus. Le code approprié pour la mise en surbrillance "à la mise au point" 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, il suffit de changer la propriété border-color.

5
Mindsect Team

Ajoutez un identifiant à la balise body. Dans votre propre fichier Css (pas le fichier 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 maintenant 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 bootstrap css

5
homefreelancer

Dans Bootstrap3.3.7, vous pouvez modifier la valeur @ input-border-focus dans la section Formulaires du personnaliseur: enter image description here

1
Steve