Lập trình web

How To Edit CSS Dotted Outline

Chia sẻ nhanh

Outline được sử dụng như một trợ giúp thị giác cho người dùng truy cập vào các trang web chỉ với bàn phím- phím Tab. Nó cho người sử dụng biết con trỏ chuột đang ở đâu. Tuy nhiên, trong một số trường hợp, những outline này trở nên khó coi, gây phiền nhiễu, gây khó chịu và làm cho một số nhà thiết kế muốn loại bỏ bằng cách ẩn nó đi với CSS:

  1. a:hover, a:active, a:focus {
  2. outline: 0;
  3. }

Giữ lại Outline

Có ý kiến ​​cho rằng chúng ta không nên loại bỏ các outline này. Thay vào đó, chúng ta có thể thử trình bày các outline để cho nó phù hợp với thiết kế trang web của mình. Nếu loại bỏ các outline này, sẽ gây khó khăn cho người sử dụng không dùng chuột hay cho trình đọc màn hình.

Styling Outline

Outline được quy định bởi các thuộc tính trong CSS. Chúng ta có thể quy định style outline, chiều rộng, và màu sắc. Từ ví dụ trước đó, chúng ta có thể thử outline với style như sau.

  1. a:active,
  2. a:focus {
  3. outline: 2pxsolid#e9841d;
  4. }

Và kết quả:

Thay thế Outline

Ngoài ra, chúng ta có thể loại bỏ các outline và thay thế nó bằng các thuộc tính CSS khác. Ví dụ, chúng ta có thể thay thế các outline với backgrond màu, như sau.

  1. a:active,
  2. a:focus {
  3. outline: 0;
  4. backgrond-color: #e9841d;
  5. }

Còn một số thuộc tính CSS khác mà chúng ta có thể sử dụng để thay thế là color, border, and text-decoration.

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?