CSS Outline thực hành tốt nhất

Question

Tính đến cuối năm, đã có một số điều tuyệt vời (và phiền phức) qua việc thực hành làm như sau:

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

Hầu hết những dường như liên quan đến vấn đề tiếp cận.

Không phải ý định của tôi là xóa hoàn toàn tính năng này (như mã bên trên) ... Tuy nhiên, tính năng này làm hỏng thiết kế ban đầu của tôi, thêm đường viền không mong muốn (erm, phác thảo?) Trong các khu vực không mong muốn.

Vấn đề chính với điều này là thực tế rằng các phác thảo này, bị đặt tên sai, chúng thực sự phác thảo khu vực hình chữ nhật xung quanh phần tử, chứ không phải đường viền của nó (ví dụ, nó bỏ qua bán kính biên giới, v.v.).

Hãy xem một ví dụ phải không?

http://jsfiddle.net/x5Mex/

Giải pháp duy nhất cho điều này là có mã chạy trên và sử dụng hệ thống riêng của tôi. Giống như chúng tôi luôn làm với trình duyệt web ...

Answer 1

Thật vậy. Đường viền nằm xung quanh khu vực hình chữ nhật ở bên ngoài biên giới. Nó không có góc tròn.

Không có gì sai với việc vô hiệu hóa các phác thảo là, chỉ cần đảm bảo bạn thêm một số tính năng khả năng tiếp cận khác đối với những người sử dụng bàn phím, ví dụ, thay đổi màu sắc của nền của bạn vào trọng tâm

Example

Answer 2

Như nhiều phần tử biểu mẫu, phần tử nút có các kết xuất khác nhau trong trình duyệt và cần nhiều bản sửa lỗi ...

http://fvsch.com/code/button-css/ từ F. Verschelde nên để bạn phác thảo các nút xung quanh toàn bộ phần tử và không xung quanh nội dung của nó.