in ,

Cách tắt cho phép chọn văn bản bằng CSS

Có thể bạn tự hỏi có kỹ thuật tận dụng CSS nào để dừng hiệu ứng tô sáng cho các nội dung văn bản hay không.

Tất nhiên nó có thể được thực hiện dễ dàng với JavaScript và tìm kiếm nhanh đã tìm thấy tùy chọn -moz-user-select dành riêng cho Mozilla. Tuy nhiên có phương pháp CSS để thực hiện.

Cụ thể, user-select + -webkit-user-select cho Safari là đủ để đạt được hành vi mong muốn trong tất cả các trình duyệt chính. Đây là tất cả các biến thể CSS chính xác có sẵn:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

Bây giờ ví dụ bạn có đoạn code:

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Thì nội dung Unselectable text trong tag <p> mang class là noselect sẽ không thể chọn được.

Theo stackoverflow

Written by Linh Nguyễn

Mình đang thực hiện trang Trải Nghiệm Số tại địa chỉ trainghiemso.vn, ngoài ra còn là BTV Công Nghệ tại báo VietNamNet. Trang blog này mình tổng hợp lại các bài viết do mình thực hiện, cũng như viết lảm nhảm cho vui.

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments