Thay đổi tập trung vào Bootstrap phát sáng màu xanh

Có ai biết cách thay đổi Bootstrap input:focuskhông? Ánh sáng màu xanh xuất hiện khi bạn nhấp vào một inputtrường?

Cuối cùng, tôi đã thay đổi mục css sau trong 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;
}

Bạn có thể sử dụng .form-controlbộ chọn để khớp với tất cả các đầu vào. Ví dụ để thay đổi thành màu đỏ:

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

Đặt nó trong tập tin css tùy chỉnh của bạn và tải nó sau khi bootstrap.css. Nó sẽ áp dụng cho tất cả các đầu vào bao gồm cả textarea, chọn vv ...

Nếu bạn đang sử dụng Bootstrap 3.x, bây giờ bạn có thể thay đổi màu với @input-border-focusbiến mới .

Xem cam kết để biết thêm thông tin và cảnh báo.

Trong bản cập nhật _variabled.scss@input-border-focus .

Để sửa đổi kích thước / các phần khác của ánh sáng này, hãy sửa đổi 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);
  }
}

Bạn có thể sửa đổi .form-control:focus màu sắc mà không thay đổi kiểu bootstrap theo cách này:

Khắc phục nhanh

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

Giải thích đầy đủ

1. Tìm phiên bản bootstrapCDN mà bạn đang sử dụng. Ví dụ: đối với tôi ngay bây giờ là 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. Tìm kiếm lớp bạn muốn sửa đổi. Ví dụ .form-control:focusvà sao chép các tham số mà bạn muốn sửa đổi vào css của bạn. Trong trường hợp này là border-colorvà box-shadow.
3. Chọn một màu cho border-color. Trong trường hợp này, tôi chọn chọn cùng màu xanh lục mà bootstrap sử dụng cho .btn-successlớp của họ , bằng cách tìm kiếm lớp cụ thể đó trong trang bootstrap.css được đề cập trong bước 1.
4. Chuyển đổi màu bạn đã chọn thành RGB và thêm màu đó vào box-shadowtham số mà không thay đổi tham số RGBA thứ tư (0,25) mà bootstrap có để minh bạch.

Đối với phiên bản beta Bootstrap v4.0.0, bạn sẽ cần thêm phần sau vào biểu định kiểu ghi đè Bootstrap (thêm vào sau CDN / liên kết cục bộ để bootstrap v4.0.0 beta hoặc thêm !importantvào các kiểu dáng:

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

Thay thế màu viền và rgba trên bóng hộp bằng kiểu màu nào bạn thích *.

Trong Bootstrap 4, nếu bạn tự biên dịch SASS, bạn có thể thay đổi các biến sau để kiểm soát kiểu dáng của bóng tiêu điểm:

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

Lưu ý: kể từ Bootstrap 4.1, các biến $input-btn-focus-colorvà $input-btn-focus-box-shadowbiến chỉ được sử dụng cho các phần tử đầu vào, nhưng không sử dụng cho các nút. Bóng tiêu điểm cho các nút được mã hóa cứng box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, vì vậy bạn chỉ có thể kiểm soát độ rộng bóng thông qua $input-btn-focus-widthbiến.

Dưới đây là những thay đổi nếu bạn muốn Chrome hiển thị phác thảo "màu vàng" mặc định của nền tảng.

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

Để tắt ánh sáng màu xanh lam (nhưng bạn có thể sửa đổi mã để thay đổi màu sắc, kích thước, v.v.), hãy thêm mã này vào css của bạn:

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

Đây là một screencapture cho thấy hiệu quả: trước và sau:

Tôi tìm đến chủ đề này để tìm cách vô hiệu hóa hoàn toàn ánh sáng. Nhiều câu trả lời đã quá phức tạp cho mục đích của tôi. Để giải pháp dễ dàng, tôi chỉ cần một dòng CSS như sau.

input, textarea, button {outline: none; }

Thêm một Id vào thẻ body. Trong Css của riêng bạn (không phải bootstrap.css) trỏ đến ID thân mới và đặt lớp hoặc thẻ bạn muốn ghi đè và các thuộc tính mới. Bây giờ bạn có thể cập nhật bootstrap bất cứ lúc nào mà không mất các thay đổi của bạn.

tập tin html:

  <body id="bootstrap-overrides">

tập tin 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;
}

Xem thêm: cách tốt nhất để ghi đè css bootstrap

Trên thực tế, trong Bootstrap 4.0.0-Beta (kể từ tháng 10 năm 2017), phần tử đầu vào không được tham chiếu bởi đầu vào [type = "text"] , tất cả các thuộc tính Bootstrap 4 cho phần tử đầu vào thực sự dựa trên mẫu .

Vì vậy, nó sử dụng .form-control: kiểu tập trung . Mã thích hợp để làm nổi bật "tiêu điểm" của phần tử đầu vào là như sau:

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

Khá dễ thực hiện, chỉ cần thay đổi thuộc tính màu viền .

Trong Bootstrap 3.3.7, bạn có thể thay đổi giá trị @ input-Border-Focus trong phần Biểu mẫu của tùy biến:

Xây dựng câu trả lời của @ wasinger ở trên, trong Bootstrap 4.5 tôi đã phải ghi đè không chỉ các biến màu mà còn cả box-shadowchính nó.

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

Tại sao không chỉ sử dụng?

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

Tôi không thể giải quyết điều này bằng CSS. Có vẻ như Boostrap đang có tiếng nói cuối cùng mặc dù tôi có trang web.css sau bootstrap. Trong mọi trường hợp, điều này làm việc cho tôi.

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

Sau đó tôi tìm thấy nó để làm việc trong css. Rõ ràng chỉ với điều khiển biểu mẫu

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

Đây là những bức ảnh trước và sau từ công cụ Chrome Developer. Lưu ý sự khác biệt về màu đường viền giữa lấy nét và lấy nét. Trên một lưu ý phụ, điều này không hoạt động cho các nút. Với các nút. Với các nút, bạn phải thay đổi thuộc tính phác thảo thành không.

Đối với đường viền đầu vào trước tiêu điểm. Bạn có thể chỉ định màu yêu thích mà bạn muốn sử dụng và các css khác như đệm, v.v.

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

Khi chúng tôi tập trung vào đầu vào. Bạn có thể chỉ định phác thảo màu yêu thích của bạn mà bạn muốn

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

Nếu bạn muốn loại bỏ bóng hoàn toàn, hãy thêm lớp shadow-nonevào thành phần đầu vào của bạn.