ปุ่ม bootstrap แสดงโครงร่างสีน้ำเงินเมื่อคลิก

ฉันเพิ่มสิ่งนี้แล้ว แต่ยังคงมีเส้นสีน้ำเงินปรากฏขึ้นเมื่อคลิกปุ่ม

.btn:focus {
  outline: none;
}

จะเอาสิ่งที่น่าเกลียดนั้นออกได้อย่างไร?

อาจเป็นเพราะคุณสมบัติของคุณกำลังถูกลบล้าง ลองแนบ !importantรหัสของคุณพร้อมกับ: active

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

เพิ่ม box-shadow ด้วยเพราะมิฉะนั้นคุณจะยังคงเห็นเงารอบ ๆ ปุ่ม

แม้ว่านี่จะไม่ใช่แนวปฏิบัติที่ดีที่จะใช้ แต่สิ่งสำคัญฉันขอแนะนำให้คุณใช้คลาสที่เฉพาะเจาะจงมากขึ้นแล้วลองใช้ css ด้วยการใช้! important ...

ใน Bootstrap เวอร์ชันล่าสุดฉันพบว่าการลบโครงร่างนั้นไม่ได้ผล และฉันต้องเพิ่มสิ่งนี้เพราะมีกล่องเงา:

.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}

มีคลาส boostrap ในตัวshadow-noneสำหรับปิดการใช้งานbox-shadow(not outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ) สิ่งนี้จะลบเงาของปุ่ม:

<button class='btn btn-primary shadow-none'>Example button</button>

ลองด้านล่างรหัส

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

สิ่งนี้เกิดขึ้นกับฉันใน Chrome (แม้ว่าจะไม่ใช่ใน Firefox) ฉันได้พบว่าทรัพย์สินที่ถูกกำหนดโดยเงินทุนเป็นoutline outline: 5px auto -webkit-focus-ring-color;แก้ไขได้โดยการแทนที่outlineคุณสมบัติในภายหลังใน CSS ที่กำหนดเองของฉันดังนี้:

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 0;
}

ปุ่มนี้จะแก้ปัญหาด้วยข้อความปุ่มเฉพาะไอคอนหรือปุ่มคือลิงค์:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

ถ้าคุณเพิ่ม border:none !important;

{
    border:none !important;
    outline:none !important;
}

จากนั้นปุ่มจะมีขนาดเล็กลงเมื่อคลิก

ลองทำตามนี้

.btn
{
    box-shadow: none;
    outline: none;
}

ใน Bootstrap 4 พวกเขาใช้ box-shadow: 0 0 0 0px rgba(0,123,255,0);บน: focus ฉันแก้ปัญหาของฉันด้วย

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

วิธีนี้อาจช่วยได้หากยังมีคนยังไม่ได้รับการแก้ไข

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

แม้ว่าจะลบเค้าโครงออกจากปุ่มโดยตั้งค่าเป็น 0 แต่ก็ยังมีพฤติกรรมตลก ๆ บนปุ่มเมื่อคลิกขนาดของมันจะหดลงเล็กน้อย ดังนั้นฉันจึงคิดวิธีแก้ปัญหาที่ดีที่สุด:

.btn:focus {
   outline: none !important;
   box-shadow: 0 0 0 0;
}

หวังว่านี่จะช่วยได้ ...

คุณต้องใช้การทำรังที่เหมาะสมจากนั้นจึงใช้สไตล์กับมัน

• คลิกขวาที่ปุ่มและค้นหาคลาสที่ซ้อนกันโดยใช้ (ตรวจสอบองค์ประกอบโดยใช้ firebug สำหรับ firefox) (ตรวจสอบองค์ประกอบสำหรับ chrome)

• เพิ่มสไตล์ให้กับกลุ่มคนทั้งชั้นเรียน แค่นั้นก็ใช้ได้แล้ว

ฉันพบว่าสิ่งนี้มีประโยชน์มากในกรณีของฉันหลังจากคลิกปุ่ม

$('#buttonId').blur();

ฉันเลือกที่จะลบความกว้างของเส้นขอบ:focusออก วิธีนี้จะลบช่องว่างที่น่าเกลียดระหว่างโครงร่างและมุมโค้งมนของปุ่ม ด้วยเหตุผลบางประการปัญหานี้เกิดขึ้นกับองค์ประกอบปุ่มจริงเท่านั้นไม่ใช่<a class="btn">องค์ประกอบ

button.btn:focus {
  border-width: 0;
}

นี่คือโซลูชัน Boostrap 4 ของฉันเพื่อลบโครงร่างปุ่ม

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

ฉันเพิ่งมีปัญหาเดียวกันและรหัสต่อไปนี้ใช้ได้กับฉัน:

.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {
    outline: none !important;
}

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

หวังว่ามันจะช่วยได้!

จริงๆแล้วใน bootstrap มีการกำหนดตัวแปรทั้งหมดสำหรับทุกกรณี ในกรณีของคุณคุณต้องแทนที่ตัวแปรเริ่มต้น '$ input-btn-focus-box-shadow' จากไฟล์ '_variables.scss' เช่นนั้น: $input-btn-focus-box-shadow: none; โปรดทราบว่าคุณต้องลบล้างตัวแปรนั้นใน '_yourCusomVarsFile.scss' ที่คุณกำหนดเอง และไฟล์นั้นควรนำเข้าในโปรเจ็กต์ตามลำดับก่อนแล้วจึงบูตสแตรปดังนี้:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

bootstraps vars ใช้แฟล็ก '! default'

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

ดังนั้นในไฟล์ของคุณคุณจะลบล้างค่าเริ่มต้น นี่คือภาพประกอบ:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

ตัวแปรแรกมีลำดับความสำคัญมากกว่าจากนั้นตัวแปรที่สอง เช่นเดียวกับรัฐและกรณีที่เหลือ หวังว่ามันจะช่วยคุณได้

นี่คือไฟล์ '_variable.scss' จาก repo ที่คุณสามารถค้นหาค่าเริ่มต้นทั้งหมดจาก bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

สิ่งนี้ใช้ได้กับฉันใน BS3

อันนี้ใช้ได้กับฉันใน Bootstrap 4:

.btn {border-color: transparent;}

ลอง

.btn-primary:focus { 
  box-shadow: none !important; 
}

โปรดทราบว่าหากปุ่มของคุณอยู่ในจุดยึดเช่น:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

การเพิ่มสไตล์ให้ปุ่มเองอาจไม่เพียงพอคุณอาจต้องเพิ่มa:focus, a:active { outline: none }กฎ CSS ตามความเหมาะสม (วิธีนี้ใช้ได้ผลกับฉัน)

ลองดูด้านล่าง

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

บางครั้ง{outline: 0}ไม่สามารถแก้ปัญหาและเราสามารถลอง{box-shadow: none;}

ฉันใช้ bootstrap 4 คุณสามารถใช้ outline และ box-shadow ได้

#buttonId {
    box-shadow: none;
    outline: none;
}

หรือถ้าปุ่มอยู่ในองค์ประกอบเช่น div ที่ไม่มีพื้นหลังกล่องเงาก็เพียงพอแล้ว

#buttonId {
     box-shadow: none;
}

ตัวอย่าง: https://codepen.io/techednelson/pen/XRwgRB

หากคุณใช้เวอร์ชัน 4.3 ขึ้นไปโค้ดของคุณจะทำงานไม่ถูกต้อง นี่คือสิ่งที่ฉันใช้ มันได้ผลสำหรับฉัน

.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

แทนที่จะกำหนดเป้าหมายไปที่คลาสปุ่ม ( .btn ) ที่นี่ฉันกำหนดเป้าหมายไปที่องค์ประกอบของปุ่มเองและมันก็ใช้ได้สำหรับฉัน

        button:focus {
          outline:none !important;
          box-shadow:none !important;
        }

และสามารถใช้shadow-noneคลาสสำหรับฟิลด์อินพุต

นี่เป็นวิธีที่ไม่ใช่ CSS การใช้ JQuery เพียงแค่ลบคลาส "focus" เมื่อใดก็ตามที่มีการคลิกองค์ประกอบ

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

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

เหตุผลที่ฉันใช้. mousemove () คือ. click () และ .mouseup () พิสูจน์แล้วว่าไม่ได้ผล

การเปลี่ยนค่าเหล่านี้ได้ผลสำหรับฉัน ฉันพบโดยดูที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

สิ่งนี้ยังคงเงาของปุ่มไว้ด้วยเช่นกันโดยจะเปลี่ยนสีของปุ่มเมื่อคลิกเท่านั้น

แทนที่คำสั่ง bootstrap ที่แน่นอน:

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

เปลี่ยนสีเส้นขอบกลับเป็นสีเทา

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

วิธี SCSS สำหรับองค์ประกอบทั้งหมด (ไม่ใช่เฉพาะปุ่ม):

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}