2013-03-01 34 views
9

Thực ra tôi đang sử dụng plugin SpryTabs để điều hướng menu. Tôi đã sử dụng hai hình nền để kích hoạt và hủy kích hoạt các tab. Tôi đang kích hoạt một tab khi di chuột. Có nghĩa là tab được đánh dấu và hủy kích hoạt tab đã chọn khi nhấp vào tab khác.Làm cách nào để xóa đường viền xung quanh hình ảnh xuất hiện sau khi nhấp vào hình ảnh trong Google Chrome?

Cho đến đây, mọi thứ đều ổn. Nhưng vấn đề thực sự xảy ra khi người dùng nhấp vào tab sau khi di chuột, đường viền được hiển thị xung quanh hình ảnh.

Điều này không xảy ra trong Firefox, điều này chỉ xảy ra trong Chrome và IE.

Trả lời

25

Bạn có thể thêm đoạn mã sau trong CSS cho các yếu tố cụ thể

textarea:focus, input:focus{ 
    outline: none; 
} 

Và đối với tất cả các yếu tố trên việc sử dụng trang mã tổng quát này trong css của bạn

*:focus { 
    outline: none; 
} 

này làm việc cho tôi khi có một đường viền màu cam xuất hiện xung quanh hình ảnh và hộp nhập liệu.

+1

Trong khi tất cả đều chính xác về mặt kỹ thuật , thường là một ý tưởng tồi từ quan điểm trợ năng để loại bỏ chúng. Tôi sẽ không làm điều này trên bất kỳ trang web sản xuất với một đối tượng khá lớn. Ngoài ra, bạn có thể xóa đường viền nhưng sau đó thêm một số dấu hiệu khác về vị trí lấy nét bàn phím. –

+0

@BrendanHeywood. Theo quan điểm của bạn, bạn là đúng, nhưng nếu có bất kỳ yêu cầu nào để loại bỏ biên giới như vậy, bất kể nhận thức về sự kiện nhấp chuột, bạn có thể sử dụng giải pháp này. Đó là nó. – PHPLover

+0

http://www.w3.org/TR/WCAG20-TECHS/F78.html – danielnixon

4

Hãy thử outline: none; trên hình ảnh

2

Sử dụng outline:none hoặc outline:0

Kiểm tra tương tự như một here

1

Đã cùng một vấn đề một lần, sau phong cách cố định vấn đề:

outline: 1px solid transparent; 

Btw outline:none có không có hiệu lực đối với chrome vì lý do nào đó

+0

Sẽ rất thú vị để tìm hiểu lý do bạn trải nghiệm điều này. Chỉ cần thêm một counterpoint ở đây, tôi chỉ thêm phác thảo: none vào một instance của cái này mà tôi đã có (nó là '

Các vấn đề liên quan