เปลี่ยน Bootstrap อินพุตโฟกัสแสงสีน้ำเงิน

ไม่มีใครรู้วิธีการเปลี่ยน Bootstrap input:focusหรือไม่ แสงสีน้ำเงินที่ปรากฏขึ้นเมื่อคุณคลิกที่inputเขตข้อมูลหรือไม่

ในที่สุดฉันเปลี่ยนรายการ css ต่อไปนี้ใน 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;
}

คุณสามารถใช้.form-controlตัวเลือกเพื่อจับคู่อินพุตทั้งหมด ตัวอย่างเช่นการเปลี่ยนเป็นสีแดง:

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

วางไว้ในไฟล์ css ที่กำหนดเองของคุณและโหลดหลังจาก bootstrap.css มันจะใช้กับอินพุตทั้งหมดรวมถึง textarea เลือกอื่น ๆ ...

หากคุณใช้ Bootstrap 3.x คุณสามารถเปลี่ยนสีได้ด้วย@input-border-focusตัวแปรใหม่

ดูการกระทำสำหรับข้อมูลเพิ่มเติมและคำเตือน

ใน_variables.scss@input-border-focusปรับปรุง

ในการปรับเปลี่ยนขนาด / ส่วนอื่น ๆ ของแสงนี้แก้ไข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);
  }
}

คุณสามารถปรับเปลี่ยน.form-control:focus สีได้โดยไม่ต้องเปลี่ยนสไตล์บู๊ตสแตรปด้วยวิธีนี้:

แก้ไขด่วน

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

คำอธิบายแบบเต็ม

1. ค้นหาเวอร์ชั่น bootstrapCDN ที่คุณใช้ เช่นสำหรับฉันตอนนี้คือ 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
2. ค้นหาคลาสที่คุณต้องการแก้ไข เช่น.form-control:focusและคัดลอกพารามิเตอร์ที่คุณต้องการแก้ไขใน css ของคุณ ในกรณีนี้และborder-colorbox-shadow
3. border-colorเลือกสีที่ ในกรณีนี้ฉันเลือกรับสีเขียวเดียวกันที่ bootstrap ใช้สำหรับ.btn-successคลาสของพวกเขาโดยค้นหาคลาสนั้นในหน้า bootstrap.css ที่กล่าวถึงในขั้นตอนที่ 1
4. แปลงสีที่คุณเลือกเป็น RGB และเพิ่มไปยังbox-shadowพารามิเตอร์โดยไม่ต้องเปลี่ยนพารามิเตอร์ RGBA ที่สี่ (0.25) ที่ bootstrap มีเพื่อความโปร่งใส

สำหรับ Bootstrap v4.0.0 รุ่นเบต้าคุณจะต้องเพิ่มสิ่งต่อไปนี้ลงในสไตล์ชีทที่แทนที่ Bootstrap (อาจเพิ่มหลังจากลิงก์ CDN / โลคัลไปยัง bootstrap v4.0.0 เบต้าหรือเพิ่ม!importantไปยังสไตล์:

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

แทนที่สีเส้นขอบและ rgba บนกล่องเงาด้วยสไตล์สีที่คุณต้องการ *

ใน Bootstrap 4 หากคุณรวบรวม SASS ด้วยตัวเองคุณสามารถเปลี่ยนตัวแปรต่อไปนี้เพื่อควบคุมการกำหนดสไตล์ของเงาโฟกัส:

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

หมายเหตุ: ตั้งแต่ Bootstrap 4.1, $input-btn-focus-colorและ$input-btn-focus-box-shadowตัวแปรจะใช้สำหรับองค์ประกอบอินพุตเท่านั้น แต่ไม่ใช้สำหรับปุ่ม เงาของโฟกัสสำหรับปุ่มนั้นถูกฮาร์ดโค้ดbox-shadow: 0 0 0 $btn-focus-width rgba($border, .5);เพื่อให้คุณสามารถควบคุมความกว้างของเงาผ่าน$input-btn-focus-widthตัวแปร

นี่คือการเปลี่ยนแปลงหากคุณต้องการให้ Chrome แสดงโครงร่าง "สีเหลือง" เริ่มต้นของแพลตฟอร์ม

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

หากต้องการปิดการใช้งานแสงสีน้ำเงิน (แต่คุณสามารถแก้ไขรหัสเพื่อเปลี่ยนสีขนาด ฯลฯ ) ให้เพิ่มส่วนนี้ใน css ของคุณ:

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

นี่คือภาพหน้าจอที่แสดงเอฟเฟกต์: ก่อนและหลัง:

ฉันลงจอดที่หัวข้อนี้เพื่อค้นหาวิธีปิดการใช้งานการเรืองแสงทั้งหมด มีคำตอบมากมายที่ซับซ้อนเกินไปสำหรับจุดประสงค์ของฉัน สำหรับการแก้ปัญหาที่ง่ายฉันต้องการ CSS หนึ่งบรรทัดดังนี้

input, textarea, button {outline: none; }

เพิ่มรหัสลงในแท็กเนื้อหา ใน Css ของคุณเอง (ไม่ใช่ bootstrap.css) ให้ชี้ไปที่ body ID ใหม่และตั้งค่าคลาสหรือแท็กที่คุณต้องการแทนที่และคุณสมบัติใหม่ ตอนนี้คุณสามารถอัพเดต bootstrap ได้ทุกเวลาโดยไม่ทำให้การเปลี่ยนแปลงของคุณสูญหาย

ไฟล์ html:

  <body id="bootstrap-overrides">

ไฟล์ 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;
}

ดูเพิ่มเติม: วิธีที่ดีที่สุดในการแทนที่ bootstrap css

ที่จริงแล้วใน Bootstrap 4.0.0-Beta (ณ เดือนตุลาคม 2017) องค์ประกอบอินพุตไม่ได้ถูกอ้างอิงโดยอินพุต [type = "text"]คุณสมบัติ Bootstrap 4 ทั้งหมดสำหรับองค์ประกอบอินพุตนั้นเป็นรูปแบบตามจริง

ดังนั้นจึงใช้การควบคุม. form:สไตล์การโฟกัส รหัสที่เหมาะสมสำหรับการไฮไลต์ "ที่โฟกัส" ขององค์ประกอบอินพุตมีดังต่อไปนี้:

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

พริตตี้ง่ายต่อการใช้เพียงแค่เปลี่ยนเส้นขอบสีคุณสมบัติ

ใน Bootstrap 3.3.7 คุณสามารถเปลี่ยนค่า @ input-border-focus ในส่วน Forms ของ Customizer:

การสร้างคำตอบของ @ wasingerด้านบนในBootstrap 4.5ฉันต้องแทนที่ไม่เพียง แต่ตัวแปรสีเท่านั้น แต่ยังรวมถึงbox-shadowตัวของมันเองด้วย

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

ทำไมไม่ใช้เพียง?

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

ฉันไม่สามารถแก้ไขได้ด้วย CSS ดูเหมือนว่า Boostrap จะได้รับการพูดครั้งสุดท้ายแม้ว่าฉันจะมี site.css หลังจาก bootstrap ไม่ว่าในกรณีใด ๆ สิ่งนี้ใช้ได้สำหรับฉัน

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

ต่อมาฉันพบสิ่งนี้เพื่อทำงานใน css เห็นได้ชัดว่ามีการควบคุมรูปแบบเท่านั้น

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

นี่คือภาพก่อนและหลังจากเครื่องมือนักพัฒนา Chrome สังเกตเห็นความแตกต่างของสีเส้นขอบระหว่างการโฟกัสและการปิด ในบันทึกย่อด้านนี้ใช้ไม่ได้กับปุ่ม ด้วยปุ่ม ด้วยปุ่มคุณต้องเปลี่ยนคุณสมบัติเค้าร่างเป็น none

สำหรับขอบอินพุตก่อนโฟกัส คุณสามารถระบุสีโปรดของคุณที่คุณต้องการใช้และ css อื่น ๆ เช่น padding เป็นต้น

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

เมื่อเรามุ่งเน้นไปที่การป้อนข้อมูล คุณสามารถระบุโครงร่างสีที่คุณต้องการ

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

หากคุณต้องการลบเงาให้เพิ่มคลาสshadow-noneในองค์ประกอบอินพุตของคุณอย่างสมบูรณ์