Xóa Safari / Chrome textinput / textarea glow

Tôi tự hỏi liệu có thể loại bỏ ánh sáng màu xanh và màu vàng mặc định khi tôi nhấp vào khu vực nhập văn bản / văn bản bằng CSS không?

textarea, select, input, button { outline: none; }

Mặc dù, người ta đã lập luận rằng việc giữ ánh sáng / phác thảo thực sự có lợi cho khả năng truy cập vì nó có thể giúp người dùng thấy Element nào hiện đang được tập trung.

Bạn cũng có thể sử dụng phần tử giả ': tập trung' để chỉ nhắm mục tiêu các đầu vào khi người dùng đã chọn chúng.

Bản trình diễn: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Hiệu ứng này cũng có thể xảy ra đối với các yếu tố không phải đầu vào. Tôi đã tìm thấy các công việc sau đây như là một giải pháp tổng quát hơn

:focus {
  outline-color: transparent;
  outline-style: none;
}

Cập nhật: Bạn có thể không phải sử dụng :focusbộ chọn. Nếu bạn có một phần tử, giả sử <div id="mydiv">stuff</div>, và bạn đã nhận được ánh sáng bên ngoài trên phần tử div này, chỉ cần áp dụng như bình thường:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Thay đổi kích thước textarea trong trình duyệt dựa trên webkit:

Đặt chiều cao tối đa và chiều rộng tối đa trên vùng văn bản sẽ không loại bỏ tay cầm thay đổi kích thước hình ảnh. Thử:

resize: none;

(và vâng, tôi đồng ý với "cố gắng tránh làm bất cứ điều gì phá vỡ sự mong đợi của người dùng", nhưng đôi khi nó có ý nghĩa, tức là trong bối cảnh của một ứng dụng web)

Để tùy chỉnh giao diện của các yếu tố hình thức webkit từ đầu:

-webkit-appearance: none;

Carl W :

Hiệu ứng này cũng có thể xảy ra đối với các yếu tố không phải đầu vào. Tôi đã tìm thấy các công việc sau đây như là một giải pháp tổng quát hơn

:focus {
  outline-color: transparent;
  outline-style: none;
}

Tôi sẽ giải thích điều này:

• :focuscó nghĩa là nó phong cách các yếu tố được tập trung. Vì vậy, chúng tôi đang tạo kiểu cho các yếu tố tập trung.
• outline-color: transparent; có nghĩa là ánh sáng màu xanh là trong suốt.
• outline-style: none; làm điều tương tự

Tôi đã trải nghiệm điều này trên một divsự kiện có nhấp chuột và sau 20 lần tìm kiếm tôi đã tìm thấy đoạn trích này đã cứu ngày của tôi.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Điều này vô hiệu hóa đánh dấu nút mặc định trong trình duyệt di động webkit

Đây là giải pháp cho những người quan tâm đến khả năng tiếp cận .

Xin vui lòng, không sử dụng outline:none;để vô hiệu hóa phác thảo tập trung. Bạn đang giết chết khả năng truy cập của web nếu bạn làm điều này. Có một cách dễ dàng để làm điều này.

Kiểm tra bài viết này mà tôi đã viết để giải thích cách xóa đường viền theo cách có thể truy cập.

Ý tưởng ngắn gọn là chỉ hiển thị đường viền phác thảo khi chúng tôi phát hiện người dùng bàn phím. Khi người dùng bắt đầu sử dụng chuột, chúng tôi sẽ vô hiệu hóa phác thảo. Kết quả là bạn có được điều tốt nhất trong hai.

Nếu bạn muốn loại bỏ ánh sáng khỏi các nút trong Bootstrap (theo ý kiến ​​của tôi không hẳn là UX xấu), bạn sẽ cần mã sau đây:

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

Giải pháp này đã làm việc cho tôi.

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

đôi khi nó cũng xảy ra các nút sau đó sử dụng bên dưới để xóa đường viền ngoài

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

Tôi thấy hữu ích khi xóa đường viền trên loại nút nhập "cửa trượt", vì đường viền không che đúng "nắp" của hình ảnh cửa trượt làm cho trạng thái lấy nét trông hơi khó nhìn.

input.slidingdoorbutton:focus { outline: none;}

Tôi chỉ cần loại bỏ hiệu ứng này khỏi các trường nhập văn bản của mình và tôi không thể làm cho các kỹ thuật khác hoạt động hoàn toàn đúng, nhưng đây là những gì hiệu quả với tôi;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Đã thử nghiệm trên Firefox và trong Chrome.

Chắc chắn rồi! Bạn cũng có thể xóa viền xanh khỏi tất cả các thành phần HTML bằng cách sử dụng *

*{
    outline-color: transparent;
    outline-style: none;
  }

Và

 *{
     outline: none;   
   }