web-dev-qa-db-fra.com

Comment supprimer le contour dans Bootstrap 4

Je veux supprimer le contour de la zone de texte dans bootstrap 4 mais cela ne fonctionne pas. laissez s'il vous plaît comment puis-je supprimer cette ligne.

 enter image description here

CSS

#content #main-content input[type=text]{
   border: 0;
   border: 1px solid #ccc;
   height: 40px;
   padding-left: 10px;
   outline: 0;
 }

html

<div class="form-group">
   <label for="title">Title <span>*</span></label>
   <input type="text" class="form-control" id="title" name="title" placeholder="Enter Title">
</div>
htmlcssbootstrap-4
4
Sandeep

Le thème que vous utilisez définit box-shadow sur inset 0 -2px 0 #2196F3 sur focus.

Vous devez le remplacer, mais pas avec none, car cela le supprimerait simplement. Vous voulez probablement qu'il reste à la même valeur que lorsqu'il n'est pas ciblé. En bref, vous avez besoin de ceci:

textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}

Notez également que vous devez charger ce CSS après Bootstrap CSS et le thème que vous chargez.

8
Andrei Gheorghiu

Vous devez supprimer votre box-shadow sur input:focus. 

Ecrivez ce css dans votre fichier css personnalisé sous le css bootstrap à remplacer. Ce sera une bonne pratique si vous utilisez votre classe parent personnalisée.

.parent-class .form-group input[type=text]:focus,
.parent-class .form-group [type=text].form-control:focus, {
  box-shadow: none;
}
1
Bhuwan

Comme la réponse acceptée fonctionne, ce n’est pas la meilleure option… .. Vous pouvez simplement remplacer le contour de la saisie/du bouton en modifiant les variables. (comme la question demande spécifiquement le bootstrap 4)

Si vous remplacez les variables Bootstrap 4, like so . Vous pouvez utiliser le code suivant pour désactiver les contours de focus tous:

$input-btn-focus-box-shadow: none;

Pour désactiver uniquement le contour de la mise en évidence du bouton, utilisez la variable $btn-focus-box-shadow

Cela pourrait également être fait pour les indicateurs, les sélections, les menus déroulants, etc. Il suffit de chercher dans la liste par défaut variables du bootstrap 4

1
Luuk Skeur

Vous pouvez ajouter la classe Bootstrap shadow-none pour supprimer le plan de focus:

<div class="form-label-group">
  <input type="password" id="inputPassword" class="form-control shadow-none" placeholder="Password" required>
  <label for="inputPassword">Password</label>
</div>
0
John Dibling