Loại bỏ biên giới rải rác trên nhấp chuột

Question

Tôi đang sử dụng CSS này để loại bỏ biên giới rải rác xuất hiện khi siêu liên kết được nhấp

a:active, a:focus, input { 
    outline: 0; 
    outline-style:none; 
    outline-width:0; 
} 

này đang làm việc tốt, nhưng không hoạt động trên các nút đầu vào có ảnh nền.

Answer 1

Đây không phải là nơi tôi đặt câu hỏi về quyết định thiết kế của bạn.

Chỉ cần thêm video này vào bất kỳ mà bạn muốn loại bỏ các đường chấm chấm

onfocus="if(this.blur)this.blur()" 

Answer 2

Nó không hoạt động tốt. Nó là vẽ nó không thể điều hướng thiết kế mà không có một con chuột.

Xem http://24ways.org/2009/dont-lose-your-focus để có sự thỏa hiệp hợp lý.

Answer 3

Bạn có thể thêm onclick: blur(); để nó giữ cho tab trở nên vui vẻ và không làm hỏng thiết kế khi được nhấp.

Nhưng đối với hồ sơ, điều này dường như làm việc qua trình duyệt. Phần đầu tiên cho IE, phần thứ hai cho FF:

input, input:active, input:focus{ 
    outline: 0; 
    outline-style:none; 
    outline-width:0; 
} 

button::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner { 
    border: none; 
} 

Answer 4

Bạn cần các lớp để phân biệt liên kết nào có đường viền chấm và không có đường viền nào. Sử dụng công cụ chọn img sẽ không đủ.

Tạo kiểu cho các thẻ nhập của bạn không có đường viền chấm chấm; bạn thậm chí có thể sử dụng một lớp cho các nút nhập liệu của mình nếu bạn có nhiều kiểu (Xóa, Gửi, Hủy, vv)