Cách xóa đường viền ngoài khỏi nút nhập

Khi nhấp vào một nơi khác, đường viền biến mất, đã thử onfocus none, nhưng không giúp được gì, làm thế nào để làm cho đường viền nút xấu xí biến mất khi nhấp vào?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

sử dụng dàn ý: không có; chúng ta có thể xóa đường viền đó trong chrome

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Tiêu điểm phác thảo trong Chrome và FF

loại bỏ:

input[type="button"]{
   outline:none;
}
input[type="button"]::-moz-focus-inner {
   border: 0;
}

Bản giới thiệu

Khả năng tiếp cận (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Nó hoạt động đơn giản đối với tôi :)

*:focus {
    outline: 0 !important;
}

Cái này làm việc cho tôi

button:focus {
    border: none;
    outline: none;
}

Tài outlinesản là những gì bạn cần. Đây là cách viết tắt để đặt từng thuộc tính sau trong một khai báo:

• outline-style
• outline-width
• outline-color

Bạn có thể sử dụng outline: none;, được gợi ý trong câu trả lời được chấp nhận. Bạn cũng có thể cụ thể hơn nếu bạn muốn:

button {
    outline-style: none;
}

button:focus{outline:none !important;}

thêm !importantnếu nó được sử dụng trong Bootstrap

Đặt cả thuộc tính outlinevà box-shadowthuộc tính của nút thành nonevà làm cho chúng quan trọng .

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

Lý do để đặt các giá trị thành quan trọng là vì nếu bạn đang sử dụng các thư viện hoặc khung công tác CSS khác như Bootstrap, nó có thể bị ghi đè.

Để tránh sự cố gây ra khi bạn thay đổi thuộc tính phác thảo trên tiêu điểm, hãy tạo hiệu ứng hình ảnh khi người dùng Tab trên nút nhập hoặc nhấp vào nó.

Trong trường hợp này là loại gửi, nhưng bạn cũng có thể áp dụng cho loại = "nút".

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

Nó rất đơn giản hơn bạn nghĩ. Khi nút được lấy tiêu điểm, hãy áp dụng thuộc outlinetính, như sau:

button:focus {
    outline: 0 !important;
}

Nhưng khi tôi sử dụng nonegiá trị, nó không có tác dụng với tôi.

Loại bỏ sự kiện có thể truy cập không cần thiết không phải là một ý tưởng hay trong các phát triển web chuẩn. một trong hai cách nếu bạn đang tìm kiếm một giải pháp, chỉ xóa đường viền không giải quyết được vấn đề. bạn cũng phải loại bỏ bóng màu xanh lam. đối với các tình huống cụ thể, hãy sử dụng một tên lớp riêng biệt để tách biệt kiểu đặc biệt này với nút của bạn.

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

Tốt hơn nên làm điều này

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Xóa đường viền là một cơn ác mộng về khả năng tiếp cận. Mọi người tab bằng bàn phím sẽ không bao giờ biết họ đang ở mục nào.

Tốt nhất là để nó, vì hầu hết các nút được nhấp vào sẽ đưa bạn đến một nơi nào đó, hoặc nếu bạn PHẢI xóa đường viền thì hãy tách nó ra một tên lớp cụ thể.

.no-outline {
  outline: none;
}

Sau đó, bạn có thể áp dụng lớp học đó bất cứ khi nào bạn cần.

Đưa ra html dưới đây:

<button class="btn-without-border"> Submit </button>

Trong kiểu css, hãy làm như sau:

.btn-without-border:focus {
    border: none;
    outline: none;
}

Mã này sẽ xóa đường viền nút và sẽ vô hiệu hóa tiêu điểm đường viền nút khi nút được nhấp.

Như nhiều người khác đã đề cập, selector:focus {outline: none;}sẽ loại bỏ đường viền đó nhưng đường viền đó là một tính năng trợ năng chính cho phép người dùng bàn phím tìm thấy nút và không nên loại bỏ.

Vì mối quan tâm của bạn có vẻ là vấn đề thẩm mỹ, bạn nên biết rằng bạn có thể thay đổi màu sắc, kiểu dáng và chiều rộng của đường viền, làm cho nó phù hợp hơn với kiểu trang web của bạn.

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

Tốc ký:

selector:focus {
  outline: 1px dashed red;
}