Helpex - Trao đổi & giúp đỡ Đăng nhập
390

Tôi đã thấy rằng chrome đặt một đường viền dày hơn :focusnhưng nó có vẻ không ổn trong trường hợp của tôi, nơi tôi cũng đã sử dụng bán kính đường viền. Có cách nào để loại bỏ điều đó không?

Làm cách nào để đặt lại / xóa viền đánh dấu / tiêu điểm đầu vào của chrome? [bản sao]

390 hữu ích 1 bình luận 453k xem chia sẻ
801

Bạn có thể xóa nó bằng cách sử dụng

outline: none;

nhưng hãy nhớ rằng điều này có khả năng ảnh hưởng xấu đến khả năng sử dụng: Sẽ rất khó để biết liệu một phần tử có được tập trung hay không, điều này có thể gây khó khăn khi bạn xem qua tất cả các phần tử của biểu mẫu bằng cách sử dụng Tabkhóa - bạn nên phản ánh bằng cách nào đó khi một phần tử được lấy tiêu điểm.

801 hữu ích 5 bình luận chia sẻ
138

Tôi đã phải làm tất cả những điều sau để loại bỏ hoàn toàn nó:

outline-style: none;
box-shadow: none;
border-color: transparent;

Thí dụ:

button {
  border-radius: 20px;
  padding: 20px;
}

.no-focusborder:focus {
  outline-style: none;
  box-shadow: none;
  border-color: transparent;
  background-color: black;
  color: white;
}
<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>
Mở rộng đoạn mã

138 hữu ích 5 bình luận chia sẻ
82

Để loại bỏ tiêu điểm mặc định, hãy sử dụng phần sau trong tệp .css mặc định của bạn:

:focus {outline:none;}

Sau đó, bạn có thể kiểm soát màu đường viền tiêu điểm riêng lẻ theo phần tử hoặc trong .css mặc định:

:focus {outline:none;border:1px solid red}

Rõ ràng là thay thế redbằng mã hex đã chọn của bạn.

Bạn cũng có thể để nguyên đường viền và kiểm soát màu nền (hoặc hình ảnh) để đánh dấu trường:

:focus {outline:none;background-color:red}

:-)

82 hữu ích 0 bình luận chia sẻ
23

Điều này chắc chắn sẽ hiệu quả. Đường viền màu cam sẽ không hiển thị nữa .. Chung cho tất cả các thẻ:

*:focus {
    outline: none;
   }

Cụ thể cho một số thẻ, ví dụ: thẻ đầu vào

input:focus{
   outline:none;
  }
23 hữu ích 0 bình luận chia sẻ
16
border:0;
outline:none;
box-shadow:none;

Cái này cần phải dùng mẹo.

16 hữu ích 0 bình luận chia sẻ
11

Cách đơn giản nhất là sử dụng một cái gì đó như thế này nhưng lưu ý rằng nó có thể không tốt.

input {
  outline: none;
}

Tôi hy vọng bạn thấy nó hữu dụng.

11 hữu ích 0 bình luận chia sẻ
5

bạn chỉ có thể đặt outline: none;và viền sang một màu khác trên tiêu điểm.

5 hữu ích 0 bình luận chia sẻ
5

Vấn đề là khi bạn đã có dàn ý. Chrome vẫn thay đổi một số thứ và đó là một nỗi đau thực sự. Tôi không thể tìm thấy những gì cần thay đổi:

.search input {
  outline: .5em solid black;
  width:41%;
  background-color:white;
  border:none;
  font-size:1.4em;
  padding: 0 0.5em 0 0.5em;
  border-radius:3px;
  margin:0;
  height:2em;
}

.search input:focus, .search input:hover {
  outline: .5em solid black !important;
  box-shadow:none;
  border-color:transparent;;
 }

.search button {
  border:none;
  outline: .5em solid black;
  color:white;
  font-size:1.4em;
  padding: 0 0.9em 0 0.9em;
  border-radius: 3px;
  margin:0;
  height:2em;
  background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
  background: -webkit-linear-gradient(#4EB4F8, #4198DE);
  background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
  background: -ms-linear-gradient(#4EB4F8, #4198DE);
  background: -o-linear-gradient(#4EB4F8, #4198DE);
  background: linear-gradient(#4EB4F8, #4198DE);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
  zoom: 1;
}

Làm cách nào để đặt lại / xóa viền đánh dấu / tiêu điểm đầu vào của chrome? [bản sao] Làm cách nào để đặt lại / xóa viền đánh dấu / tiêu điểm đầu vào của chrome? [bản sao]

5 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css google-chrome focus border , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading