Ubah cahaya biru input fokus Bootstrap

Adakah yang tahu cara mengubah Bootstrap input:focus? Cahaya biru yang muncul saat Anda mengklik inputbidang?

Pada akhirnya saya mengubah entri css berikut di 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;
}

Anda dapat menggunakan .form-controlpemilih untuk mencocokkan semua input. Misalnya untuk berubah menjadi merah:

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

Masukkan ke dalam file css khusus Anda dan muat setelah bootstrap.css. Ini akan berlaku untuk semua input termasuk textarea, pilih dll ...

Jika Anda menggunakan Bootstrap 3.x, Anda sekarang dapat mengubah warna dengan yang baru @input-border-focus variabel .

Lihat komit untuk info lebih lanjut dan peringatan.

Dalam pembaruan _variables.scss@input-border-focus .

Untuk memodifikasi ukuran / bagian lain dari cahaya ini memodifikasi 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);
  }
}

Anda dapat memodifikasi .form-control:focus warnanya tanpa mengubah gaya bootstrap dengan cara ini:

Perbaikan cepat

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

Penjelasan lengkap

1. Temukan versi bootstrapCDN yang Anda gunakan. Misalnya bagi saya sekarang adalah 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Cari kelas yang ingin Anda modifikasi. Misalnya .form-control:focusdan salin parameter yang ingin Anda modifikasi ke css Anda. Dalam hal ini adalah border-colordanbox-shadow .
3. Pilih warna untuk border-color. Dalam hal ini saya memilih untuk mengambil hijau yang sama yang digunakan bootstrap untuk mereka.btn-success kelas , dengan mencari kelas tersebut di halaman bootstrap.css yang disebutkan dalam langkah 1.
4. Konversi warna yang Anda pilih ke RGB dan tambahkan ke box-shadowparameter tanpa mengubah parameter RGBA keempat (0,25) yang dimiliki bootstrap untuk transparansi.

Untuk rilis beta Bootstrap v4.0.0 Anda akan membutuhkan yang berikut ditambahkan ke stylesheet yang menimpa Bootstrap (baik tambahkan setelah CDN / link lokal ke bootstrap v4.0.0 beta atau tambahkan !importantke stylings:

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

Ganti warna perbatasan dan rgba pada bayangan kotak dengan gaya warna apa yang Anda inginkan *.

Di Bootstrap 4, jika Anda mengkompilasi SASS sendiri, Anda dapat mengubah variabel berikut untuk mengontrol gaya bayangan fokus:

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

Catatan: pada Bootstrap 4.1, $input-btn-focus-colordan $input-btn-focus-box-shadowvariabel digunakan hanya untuk elemen input, tetapi tidak untuk tombol. Bayangan fokus untuk tombol adalah hardcode box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, jadi Anda hanya dapat mengontrol lebar bayangan melalui $input-btn-focus-widthvariabel.

Berikut adalah perubahannya jika Anda ingin Chrome menampilkan garis besar platform "kuning" default.

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

Untuk menonaktifkan cahaya biru (tetapi Anda dapat memodifikasi kode untuk mengubah warna, ukuran, dll), tambahkan ini ke css Anda:

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

Inilah screencapture yang menunjukkan efek: sebelum dan sesudah:

Saya mendarat di utas ini mencari cara untuk menonaktifkan cahaya sama sekali. Banyak jawaban yang terlalu rumit untuk tujuan saya. Untuk solusi mudah, saya hanya perlu satu baris CSS sebagai berikut.

input, textarea, button {outline: none; }

Tambahkan Id ke tag tubuh. Dalam Css Anda sendiri (bukan bootstrap.css) arahkan ke ID tubuh baru dan atur kelas atau tag yang ingin Anda timpa dan properti baru. Sekarang Anda dapat memperbarui bootstrap kapan saja tanpa kehilangan perubahan Anda.

file html:

  <body id="bootstrap-overrides">

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

Lihat juga: cara terbaik untuk mengganti bootstrap css

Sebenarnya, dalam Bootstrap 4.0.0-Beta (per Oktober 2017) elemen input tidak dirujuk oleh input [type = "text"] , semua properti Bootstrap 4 untuk elemen input sebenarnya terbentuk berbasis .

Jadi itu menggunakan .form-control: gaya fokus . Kode yang sesuai untuk menyoroti "pada fokus" elemen input adalah sebagai berikut:

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

Cukup mudah diimplementasikan, cukup ubah properti border-color .

Di Bootstrap 3.3.7 Anda dapat mengubah nilai input-perbatasan-fokus @ di bagian Formulir penyesuai:

Membangun pada @ jawaban wasinger di atas, di Bootstrap 4.5 saya harus menimpa tidak hanya variabel warna tetapi juga box-shadowitu sendiri.

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

Kenapa tidak pakai saja?

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

Saya tidak bisa menyelesaikan ini dengan CSS. Sepertinya Boostrap mendapatkan pendapat terakhir meskipun saya memiliki oleh site.css setelah bootstrap. Bagaimanapun, ini bekerja untuk saya.

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

Kemudian saya menemukan ini berfungsi di css. Tentunya dengan kontrol formulir saja

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

Berikut adalah foto sebelum dan sesudah dari alat Pengembang Chrome. Perhatikan perbedaan warna batas antara fokus aktif dan tidak aktif. Di samping catatan, ini tidak berfungsi untuk tombol. Dengan tombol. Dengan tombol, Anda harus mengubah properti outline menjadi none.

Untuk batas input sebelum fokus. Anda dapat menentukan warna favorit Anda yang ingin Anda gunakan dan css lainnya seperti bantalan dll

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

Saat kami fokus pada input. Anda dapat menentukan garis warna favorit Anda yang Anda inginkan

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

Jika Anda ingin menghapus bayangan sepenuhnya tambahkan kelas shadow-noneke elemen input Anda.