Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Sử Dụng Text Selection CSS

Cách Sử Dụng Text Selection CSS


Ngày 13 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách sử dụng các thuộc tính CSS text selection dành cho thiết kế, phát triển website nha.

Change Background Text Selection CSS

Thông thường khi bạn bôi đen một đoạn văn trên trang web thì văn bản đó sẽ có màu nền là xanh dương. Để dễ hình dung bạn xem hình ảnh dưới đây nha:

Ví Dụ Text Selection CSS

Bây giờ mình sẽ chỉ bạn cách để thay đổi màu nền mặc định của text selection trong trang web bằng thuộc tính ::selection CSS. Để hiểu rõ hơn bạn xem đoạn code sau nha:

HTML

<!--www.niemvuilaptrinh.com-->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

CSS

*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body {
  display: grid;
  align-items: center;
  justify-items: center;
  margin: 0;
  color: #fff;
  background-color: #fff;
  }
p {
  max-width: 650px;
  margin: 20px;
  padding: 30px;
  border-radius: 5px;
  background-color: #1b2a49;
  line-height: 2.75;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
/*thiết lập chữ và màu nền cho text selection*/
p::selection {
  color: #fff;
  background-color: #bada55;
  text-shadow: 1p 2px #31808c;
}

Và kết quả bạn xem hình ảnh dưới đây nha:

Change Background Text Selection CSS

Còn dưới đây là dự án trên Codepen nha.

See the Pen change text selection background by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Disable Text Selection

Trong phần này mình sẽ giới thiệu đến bạn tính năng không cho người dùng có thể chọn và sao chép nội dung trên website bằng thuộc tính user-select. Để hiểu sâu hơn thì bạn xem cú pháp của nó nhé.

 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version,Chrome, Edge, Opera and Firefox */

Và sau đây là dự án trên CodePen nha.

See the Pen Disable Text Selection by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra mình cũng thấy một chức năng khá hay của thuộc tính này là cho phép chọn tất cả nội dung trong trang web chỉ bằng một cái click chuột thông qua thuộc tính user-select: all;. Và để hiểu rõ hơn bạn xem ví dụ codepen dưới đây nha:

See the Pen user-select all by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn áp dụng text selection CSS cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.