Bootstrap giriş odağı mavi parlaklığını değiştirme

Bootstrap'lerin nasıl değiştirileceğini bilen var input:focusmı? Bir inputalanı tıkladığınızda görünen mavi parıltı mı?

Sonunda bootstrap.css dosyasında aşağıdaki css girdisini değiştirdim

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

.form-controlTüm girişleri eşleştirmek için seçiciyi kullanabilirsiniz . Örneğin kırmızıya geçmek için:

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

Özel css dosyanıza koyun ve bootstrap.css'den sonra yükleyin. Textarea, select vb. Dahil tüm girdilere uygulanacaktır.

Bootstrap 3.x kullanıyorsanız, artık rengi yenisiyle değiştirebilirsiniz. @input-border-focus değişkenle .

Görmek fazla bilgi ve uyarılar için işleme .

In _variables.scss güncelleme@input-border-focus .

Bu ışımanın boyutunu / diğer bölümlerini değiştirmek için mixins / _forms.scss dosyasını

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

Rengi değiştirebilirsiniz.form-control:focus bu şekilde önyükleme stilini değiştirmeden:

Hızlı düzeltme

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

Tam açıklama

1. Kullandığınız bootstrapCDN sürümünü bulun. Örneğin şu an benim için 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Değiştirmek istediğiniz sınıfı arayın. Örn .form-control:focusve değiştirmek istediğiniz parametreleri css'nize kopyalayın. Bu durumda border-colorve box-shadow.
3. İçin bir renk seçin border-color. Bu durumda .btn-success, 1. adımda belirtilen bootstrap.css sayfasında söz konusu sınıfı arayarak , bootstrap'ın sınıfları için kullandığı yeşili seçmeyi seçerim .
4. Seçtiğiniz rengi RGB'ye dönüştürün ve box-shadowönyüklemenin saydamlığı için sahip olduğu dördüncü RGBA parametresini (0.25) değiştirmeden parametreye ekleyin .

Bootstrap v4.0.0 beta sürümü için, Bootstrap'i geçersiz kılan bir stil sayfasına aşağıdakilere eklenmeniz gerekir (bootstrap v4.0.0 beta'ya CDN / yerel bağlantıdan sonra ekleyin veya stillere ekleyin !important:

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

Kutu gölgesindeki kenarlık rengini ve rgba'yı istediğiniz renk stiliyle değiştirin *.

Bootstrap 4'te, SASS'ı kendiniz derlerseniz, odak gölgesinin stilini kontrol etmek için aşağıdaki değişkenleri değiştirebilirsiniz:

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

Not: Bootstrap 4.1'den itibaren, $input-btn-focus-colorve $input-btn-focus-box-shadowdeğişkenleri yalnızca giriş öğeleri için kullanılır, ancak düğmeler için kullanılmaz. Düğmeler için odak gölgesi sabit olarak kodlanır box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, böylece gölge genişliğini yalnızca $input-btn-focus-widthdeğişken aracılığıyla kontrol edebilirsiniz .

Chrome'un platform varsayılan "sarı" çerçevesini göstermesini istiyorsanız, değişiklikler aşağıda açıklanmıştır.

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

Mavi parlaklığı devre dışı bırakmak için (ancak rengi, boyutu vb. Değiştirmek için kodu değiştirebilirsiniz), bunu css'nize ekleyin:

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

Etkisini gösteren bir ekran görüntüsü: önce ve sonra:

Işıma tamamen devre dışı bırakmak için bir yol arayan bu konuya indi. Birçok cevap benim amacım için fazla karmaşıktı. Kolay çözüm için, aşağıdaki gibi sadece bir CSS hattına ihtiyacım vardı.

input, textarea, button {outline: none; }

Gövde etiketine bir Kimlik ekleyin. Kendi Css'nizde (bootstrap.css değil) yeni gövde kimliğinin üzerine gelin ve geçersiz kılmak istediğiniz sınıfı veya etiketi ve yeni özellikleri ayarlayın. Artık değişikliklerinizi kaybetmeden bootstrap'i istediğiniz zaman güncelleyebilirsiniz.

html dosyası:

  <body id="bootstrap-overrides">

css dosyası:

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

Ayrıca bkz: bootstrap css'yi geçersiz kılmanın en iyi yolu

Aslında, Bootstrap 4.0.0-Beta sürümünde (Ekim 2017 itibariyle) giriş öğesine [type = "text"] girişiyle başvurulmuyor , giriş öğesi için tüm Bootstrap 4 özellikleri aslında form tabanlıdır.

Yani .form-control: odak stillerini kullanıyor. Bir giriş elemanının "odakta" vurgulaması için uygun kod şudur:

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

Uygulaması oldukça kolay, sadece kenarlık rengi özelliğini değiştirin.

Bootstrap 3.3.7'de, özelleştiricinin Formlar bölümündeki @ input-border-focus değerini değiştirebilirsiniz:

Üzerinde inşa @ wasinger en cevapta , yukarıda Bootstrap 4.5 Ben sadece renk değişkenleri geçersiz kılmak zorunda kaldı ama aynı zamanda box-shadowkendisi.

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

Neden sadece kullanmıyorsunuz?

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

Bunu CSS ile çözemedim. Görünüşe göre Boostrap, bootstrap'tan sonra site.css tarafından sahip olmama rağmen son sözü alıyor. Her halükarda, bu benim için çalıştı.

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

Daha sonra bunu css'de buldum. Açıkçası sadece form kontrolleriyle

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

Chrome Geliştirici aracından çekimlerden önce ve sonra. Odak açık ve odak kapalı arasındaki kenarlık rengindeki farka dikkat edin. Yan notta, düğmeler için çalışmaz. Düğmeleri ile. Düğmelerle anahat özelliğini yok olarak değiştirmeniz gerekir.

Odaktan önceki giriş kenarlığı için. Kullanmak istediğiniz favori renginizi ve dolgu vb.Gibi diğer css'leri belirtebilirsiniz.

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

Girdi üzerine odaklandığımızda. İstediğiniz favori renk anahattını belirtebilirsiniz

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

Gölgeyi kaldırmak istiyorsanız sınıfı shadow-nonegiriş öğenize tamamen ekleyin .