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

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments