(CSS?) Loại bỏ các dòng 'đã chọn' của trình duyệt xung quanh hình ảnh được siêu liên kết?

Question

Ảnh chụp màn hình đính kèm là từ OS X/Firefox 3. Lưu ý rằng tab giữa (hình ảnh) có một đường chấm chấm xung quanh nó, rõ ràng vì nó là tab được chọn gần đây nhất. Có cách nào tôi có thể loại bỏ dòng này chấm trong CSS hoặc JavaScript? (Hmmm ... miễn phí dịch vụ lưu trữ hình ảnh đã giảm kích thước của hình ảnh. Tuy nhiên, nếu bạn có thể nhìn thấy nó, bạn sẽ nhận thấy một chấm-line chọn khu vực xung quanh khối.)

Screen Shot http://www.freeimagehosting.net/uploads/th.fadf78173b.png

Answer 1

Bạn sẽ muốn thêm dòng sau vào css của bạn:

a:active, a:focus { outline-style: none; -moz-outline-style:none; } 

(Giả sử các tab của bạn được thực hiện bằng cách sử dụng một yếu tố, tất nhiên.)

[sửa] Theo yêu cầu từ tất cả những người khác, đối với người xem trong tương lai, cần lưu ý rằng phác thảo là điều cần thiết cho các trình điều hướng bằng bàn phím vì nó chỉ định nơi lựa chọn của bạn và, vì vậy, gợi ý vị trí của tab 'tiếp theo'. Vì vậy, nó là không thể chấp nhận để loại bỏ lựa chọn dòng rải rác này. Nhưng nó vẫn còn hữu ích để biết làm thế nào bạn sẽ làm điều đó, nếu bạn cho là cần thiết.

Và như đã đề cập trong nhận xét, nếu bạn chỉ giao dịch với FF> v1.5, vui lòng bỏ qua kiểu -moz-outline: none;

Answer 2

Trong sự kiện onclick của bạn, this.blur()

hoặc, đặc biệt đặt tiêu điểm ở một nơi khác.

Answer 3

Bạn có thể bắt đầu bằng cách xem các lớp giả: tập trung và: hoạt động, mặc dù bạn có thể không nên xóa hoàn toàn mọi định dạng khỏi các trường hợp này vì chúng là một trợ giúp vô giá.

Answer 4

Đối với người mới bắt đầu, hãy thử này

*,*:hover,*:focus,*:active { outline: 0px none; } 

Tuy nhiên điều này sẽ làm giảm khả năng sử dụng.

Bạn sẽ muốn áp dụng có chọn lọc các hiệu ứng thay thế có liên quan để cung cấp cho những người như những người điều hướng chủ yếu bằng khóa TAB có ý tưởng về những gì hiện có tiêu điểm.

div.foo:active, 
div.foo:focus, 
div.foo:hover 
{ 
    /* Alternative Style */ 
} 

Answer 5

sử dụng

*:focus {outline:0px;} 

sẽ loại bỏ phong cách cho đầu vào và textareas khi được chọn bằng chuột. Đảm bảo rằng bạn thêm các kiểu này với đường viền cho các mục biểu mẫu này nếu bạn chọn xóa tất cả các phác thảo trên: lấy nét.