Làm cách nào để đặt lại/xóa đường viền làm nổi bật/đánh dấu đầu vào của chrome?

Question

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

Answer 1

Bạn sẽ có thể loại bỏ nó bằng cách sử

outline: none; 

nhưng hãy nhớ đây là nguy cơ tiềm tàng đối với khả năng sử dụng: Sẽ khó có thể nói cho dù một phần tử được tập trung, có thể hút khi bạn đi qua tất cả các phần tử của biểu mẫu bằng cách sử dụng phím Tab - bạn nên phản ánh bằng cách nào đó khi một phần tử được tập trung.

Answer 2

bạn chỉ có thể đặt outline: none; và đường viền thành màu khác với tiêu điểm.

Answer 3

Để loại bỏ sự tập trung mặc định, sử dụng sau đây trong tập tin .css mặc định của bạn:

:focus {outline:none;} 

Sau đó bạn có thể kiểm soát màu biên giới tập trung một cách riêng biệt bởi yếu tố, hoặc trong .css mặc định:

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

Rõ ràng thay thế red bằng mã hex bạn đã chọn.

Bạn cũng có thể rời khỏi biên giới hoang sơ và kiểm soát màu nền (hoặc hình ảnh) để làm nổi bật trên sân:

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

:-)

Answer 4

này chắc chắn sẽ làm việc. 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ể đối với một số thẻ, ví dụ: thẻ đầu vào

input:focus{ 
    outline:none; 
    } 

Answer 5

tôi phải làm tất cả các tiếp theo để loại bỏ hoàn toàn it

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

Answer 6

Vấn đề là khi bạn đã có đường viền. Chrome vẫn thay đổi một cái gì đó và đó là một nỗi đau thực sự. Tôi không thể tìm thấy những gì để 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; 
} 

Answer 7

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 phải là tốt.

input { 
    outline: none; 
} 

Tôi hy vọng bạn thấy điều này hữu ích.

Answer 8

border:0; 
outline:none; 
box-shadow:none; 

Điều này cần thực hiện thủ thuật.