html - Wijzigen Bootstrap input focus blauwe gloed

Weet iemand hoe je Bootstrap’s input:focuskunt wijzigen? De blauwe gloed die verschijnt wanneer u op een input-veld klikt?

Antwoord 1, autoriteit 100%

Uiteindelijk heb ik het volgende CSS-item gewijzigd in 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;
}

Antwoord 2, autoriteit 77%

U kunt de .form-controlselector gebruiken om alle invoer te matchen. Om bijvoorbeeld naar rood te veranderen:

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

Zet het in uw aangepaste CSS-bestand en laad het na bootstrap.css. Het is van toepassing op alle invoer, inclusief tekstgebied, selecteren enz…

Antwoord 3, autoriteit 24%

Als u Bootstrap 3.x gebruikt, kunt u nu de kleur wijzigen met de nieuwe variabele @input-border-focus.

Zie de commitvoor meer informatie en waarschuwingen.

In _variables.scssupdate @input-border-focus.

Als u de grootte/andere delen van deze gloed wilt wijzigen, wijzigt u de 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);
  }
}

Antwoord 4, autoriteit 23%

U kunt de .form-control:focuskleurwijzigen zonder de bootstrap-stijl op deze manier te wijzigen:

Snelle oplossing

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

Volledige uitleg

Zoek de bootstrapCDN-versie die u gebruikt. Bijvoorbeeld voor mij is nu 4.3.1: https://maxcdn.bootstrapcdn. com/bootstrap/4.3.1/css/bootstrap.css
Zoek naar de klas die je wilt wijzigen. Bijvoorbeeld .form-control:focusen kopieer de parameters die je wilt wijzigen naar je css. In dit geval is dat border-coloren box-shadow.
Kies een kleur voor de border-color. In dit geval kies ik ervoor om hetzelfde groen op te pikken dat de bootstrap gebruikt voor hun .btn-success-klasse, door naar die specifieke klasse te zoeken op de bootstrap.css-pagina die in stap 1 wordt genoemd.
Converteer de kleur die je hebt gekozen naar RGB en voeg die toe aan de parameter box-shadowzonder de vierde RGBA-parameter (0.25) die bootstrap heeft voor transparantie te wijzigen.

Antwoord 5, autoriteit 7%

Voor de bètaversie van Bootstrap v4.0.0 moet je het volgende toevoegen aan een stylesheet die Bootstrap overschrijft (voeg toe na CDN/lokale link naar bootstrap v4.0.0 beta of voeg !importanttoe aan de stijlen:

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

Vervang de randkleur en de rgba op de doosschaduw met welke kleurstijl je maar wilt*.

Antwoord 6, autoriteit 6%

Als u in Bootstrap 4 SASS zelf compileert, kunt u de volgende variabelen wijzigen om de stijl van de focusschaduw te regelen:

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

Opmerking: vanaf Bootstrap 4.1 worden de variabelen $input-btn-focus-coloren $input-btn-focus-box-shadowalleen gebruikt voor invoer elementen, maar niet voor knoppen. De focusschaduw voor knoppen is hard gecodeerd als box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, dus je kunt de schaduwbreedte alleen regelen via de $input-btn-focus-widthvariabele.

Antwoord 7, autoriteit 5%

Dit zijn de wijzigingen als u wilt dat Chrome de standaard “gele” omtrek van het platform weergeeft.

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

Antwoord 8, autoriteit 4%

Om de blauwe gloed uit te schakelen (maar je kunt de code aanpassen om de kleur, grootte, etc. te wijzigen), voeg je dit toe aan je CSS:

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

Hier is een screenshot van het effect: voor en na:

Antwoord 9, autoriteit 3%

Ik kwam in deze thread terecht op zoek naar een manier om glow helemaal uit te schakelen. Veel antwoorden waren te ingewikkeld voor mijn doel. Voor een gemakkelijke oplossing had ik als volgt slechts één regel CSS nodig.

input, textarea, button {outline: none; }

Antwoord 10, autoriteit 2%

Voeg een ID toe aan de body-tag. Wijs in je eigen CSS (niet de bootstrap.css) naar de nieuwe body-ID en stel de klasse of tag in die je wilt overschrijven en de nieuwe eigenschappen.
Nu kun je bootstrap op elk moment updaten zonder je wijzigingen te verliezen.

html-bestand:

 <body id="bootstrap-overrides">

css-bestand:

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

Zie ook: beste manier om bootstrap css te negeren

Antwoord 11, autoriteit 2%

In Bootstrap 4.0.0-Beta (vanaf oktober 2017) wordt er niet naar het invoerelement verwezen door input[type=”text”], alle Bootstrap 4-eigenschappen voor het invoerelement zijn eigenlijk vormgebaseerd.

Dus het gebruikt de .form-control:focusstijlen. De juiste code voor het “on focus” markeren van een invoerelement is de volgende:

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

Vrij eenvoudig te implementeren, verander gewoon de eigenschap borderkleur.

Antwoord 12, autoriteit 2%

Eenvoudige

Om het te verwijderen:

.form-control, .btn {
    box-shadow: none !important;
    outline: none !important;
}

Om het te wijzigen

.form-control, .btn {
    box-shadow: new-value !important;
    outline: new-value !important;
}

Antwoord 13, autoriteit 2%

Als je de schaduw volledig wilt verwijderen, voeg dan de klasse shadow-nonetoe aan je invoerelement.

Antwoord 14, autoriteit 2%

Voortbouwend op @wasinger’s antwoordhierboven, in Bootstrap 4.5moest ik niet overschrijven alleen de kleurvariabelen maar ook de box-shadowzelf.

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

Antwoord 15

In Bootstrap 3.3.7 kunt u de waarde voor @input-border-focus wijzigen in het gedeelte Formulieren van de customizer:

Antwoord 16

Voor de invoerrand vóór de focus. U kunt uw favoriete kleur specificeren die u wilt gebruiken en andere CSS zoals opvulling enz.


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

Als we ons concentreren op input. U kunt uw favoriete kleuromtrek specificeren die u wenst


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

Antwoord 17

Waarom niet gewoon ?

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

Antwoord 18

Ik kon dit niet oplossen met CSS. Het lijkt erop dat Boostrap het laatste woord krijgt, ook al heb ik site.css na bootstrap. Bij mij werkte dit in ieder geval.

$(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";
}

Later ontdekte ik dat dit werkte in de css. Uiteraard alleen met formulierbesturing

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

Hier zijn voor- en na-opnamen van de Chrome-ontwikkelaarstool. Let op het verschil in randkleur tussen scherpstellen aan en scherpstellen uit. Even terzijde, dit werkt niet voor knoppen. Met knopen. Met knoppen moet u de eigenschap omtrek wijzigen in geen.

Antwoord 19

Dit werkt 100% gebruik dit:

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

Antwoord 20

Dit zou moeten helpen om het te verwijderen!

input[type = text] {
  border: none;
}
input[type = text]:focus {
  border: none;
  box-shadow: none;
 }

Snippet uitvouwen

Previous articleWanneer gebruik je addressof(x) in plaats van &x?

Next articleHoofdlettergevoelig Cmd+D in Sublime Text 2

Wijzigen Bootstrap input focus blauwe gloed