CSS chọn một phần của văn bản

Sử dụng

div {
  -webkit-user-select: all; /* for Safari */
  user-select: all;
}

5 để sử dụng hành vi trình duyệt mặc định để chọn văn bản. Hữu ích để hoàn tác các lớp khác như

div {
  -webkit-user-select: all; /* for Safari */
  user-select: all;
}

6 tại các điểm dừng khác nhau

Hãy thử chọn văn bản để xem hành vi dự kiến

The quick brown fox jumps over the lazy dog

  The quick brown fox jumps over the lazy dog.

---

áp dụng có điều kiện

Di chuột, tập trung và các trạng thái khác

Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng

div {
  -webkit-user-select: all; /* for Safari */
  user-select: all;
}

7 để chỉ áp dụng tiện ích

div {
  -webkit-user-select: all; /* for Safari */
  user-select: all;
}

8 khi di chuột

Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States

Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng

  The quick brown fox jumps over the lazy dog.

1 để áp dụng tiện ích

div {
  -webkit-user-select: all; /* for Safari */
  user-select: all;
}

8 chỉ với kích thước màn hình trung bình trở lên

Trong bài viết này, chúng ta sẽ tìm hiểu về bộ chọn CSS cho các phần tử chứa văn bản nhất định. Bộ chọn được sử dụng để tìm các phần tử HTML mà bạn muốn tạo kiểu. Chúng ta có thể đạt được nhiệm vụ này bằng cách sử dụng bộ chọn thuộc tính-giá trị

Bộ chọn CSS [thuộc tính-giá trị]. Trong bộ chọn [thuộc tính-giá trị], bạn có thể chọn bất kỳ tên thuộc tính nào từ tài liệu HTML và tên của giá trị. Sau khi cung cấp thuộc tính và giá trị thích hợp, trình phân tích cú pháp sẽ tìm thuộc tính đó với giá trị đó và thay đổi theo quy tắc hoặc thuộc tính CSS

CSS cho phép bạn kiểm soát cách lựa chọn văn bản hoạt động và xuất hiện trên các trang của bạn. Điều này có thể giúp bạn cải thiện khả năng sử dụng trong một số tình huống nhất định và thêm một chút điểm nhấn về mặt hình ảnh. Hãy đi sâu vào

Đôi khi, thật tuyệt khi tất cả văn bản trong một phần tử được chọn tự động khi bạn nhấp vào phần tử đó. Điều này đặc biệt hữu ích đối với văn bản được sao chép/dán đầy đủ (đoạn mã, mật khẩu dùng một lần, mã khuyến mại, v.v. )

Bạn có thể thực hiện điều này với một số CSS đơn giản. Không cần JavaScript

div {
  -webkit-user-select: all; /* for Safari */
  user-select: all;
}

Đây là một bản demo. Tin xấu, nó không hoạt động trên iOS. Tin tốt là nó xuống cấp một cách nhẹ nhàng nên vẫn có thể chọn văn bản

Xem Bút chọn tất cả của Will Boyd (@lonekorean) trên CodePen

Trong khi điều này hoạt động như mong đợi, bạn có thể nhận thấy điều gì đó khó chịu. không thể chọn bất cứ thứ gì ít hơn toàn bộ đoạn mã. Sẽ không hay sao nếu lần nhấp đầu tiên đã chọn tất cả, nhưng bạn vẫn có thể nhấp lại và chỉ chọn một phần?

Đầu tiên, sử dụng

<code tabindex="0">code snippet goes herecode>

0 để làm cho phần tử giữ văn bản có thể được đặt tiêu điểm. Điều này cung cấp cho CSS một cách để biết khi nào phần tử đã được nhấp vào

<code tabindex="0">code snippet goes herecode>

Sau đó đến CSS

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

Ý tưởng là ban đầu có

<code tabindex="0">code snippet goes herecode>

1 trên phần tử, sau đó chuyển sang

<code tabindex="0">code snippet goes herecode>

2 “bình thường” sau khi phần tử có tiêu điểm để có thể chọn lại văn bản một cách tự do. Phần khó khăn là thời gian. Thực hiện chuyển đổi ngay khi lấy nét và

<code tabindex="0">code snippet goes herecode>

1 sẽ biến mất trước khi nó có cơ hội thực hiện công việc của mình. Đó là nơi mà

<code tabindex="0">code snippet goes herecode>

4 đến

Có,

<code tabindex="0">code snippet goes herecode>

0 có thể hoạt ảnh được. Cụ thể hơn, nó có thể hoạt ảnh một cách riêng biệt, có nghĩa là không có hoạt ảnh được nội suy dần dần mà thay vào đó là sự cắt giảm ngay lập tức từ trạng thái này sang trạng thái khác. Được trang bị kiến ​​thức này, chúng ta có thể sử dụng

<code tabindex="0">code snippet goes herecode>

4 để trì hoãn thay đổi trong hành vi được chọn cho đến 100 mili giây sau tiêu điểm. Hoàn hảo

Một lần nữa, bit "chọn tất cả" không hoạt động trên iOS. Trong khi đó, Safari trên máy tính để bàn giữ nguyên văn bản là “chọn tất cả”. Thủ thuật này dường như hoạt động tốt ở nơi khác, mặc dù

Xem Bút Chọn Tất Cả. Then Select Some của Will Boyd (@lonekorean) trên CodePen

Bạn cũng có thể sử dụng CSS để làm cho văn bản trong một thành phần không thể chọn được

label {
  -webkit-user-select: none;
  user-select: none;
}

Đây có lẽ là một ý tưởng tồi đối với văn bản nội dung, nhưng tôi thấy nó hữu ích đối với các điều khiển có thể được bật/tắt nhanh chóng hoặc “nhấp chuột dữ dội” trong trình duyệt trên máy tính để bàn, vì việc nhấp đúp sẽ khiến văn bản được chọn và tô sáng, điều này có thể trông hơi lạ

Xem cho chính mình trong bản demo sau. Lưu ý cách chuyển đổi ở bên trái được tô sáng khi nhấp nhanh, trong khi nút ở bên phải thì không

Xem Bút ngăn văn bản nổi bật khỏi nhấp chuột trong cơn thịnh nộ của Will Boyd (@lonekorean) trên CodePen

Kỹ thuật này cũng hoạt động trên các tiện ích tiết lộ. Các nút giả — như một

<code tabindex="0">code snippet goes herecode>

2 với trình xử lý

<code tabindex="0">code snippet goes herecode>

3 trên đó — là một ứng cử viên khác. Hãy nhớ rằng sử dụng

<code tabindex="0">code snippet goes herecode>

4 thực sẽ tốt hơn, không chỉ vì ngữ nghĩa và khả năng truy cập, mà còn bởi vì văn bản trong

<code tabindex="0">code snippet goes herecode>

4 không thể chọn theo mặc định, tránh vấn đề bắt đầu với

Văn bản không thể chọn có thể được trộn vào văn bản có thể chọn. Các bit không thể chọn được bỏ qua đơn giản khi văn bản được chọn và sẽ bị bỏ qua khi lựa chọn được sao chép/dán

Bản trình diễn bên dưới sử dụng

<code tabindex="0">code snippet goes herecode>

6 trên các điểm đánh dấu chú thích bằng số. Vì vậy, khi bạn sao chép/dán, các điểm đánh dấu sẽ tự động bị xóa cho bạn

Xem Bút khai báo các bit của văn bản không thể chọn của Will Boyd (@lonekorean) trên CodePen

Đáng buồn thay, một số trình duyệt sẽ không chơi cùng. Safari (iOS và máy tính để bàn) và Android Chrome vẫn sẽ sao chép các điểm đánh dấu

Bạn có thể tạo kiểu cho các lựa chọn văn bản bằng cách nhắm mục tiêu phần tử giả

<code tabindex="0">code snippet goes herecode>

7. Tuy nhiên, các tùy chọn của bạn bị giới hạn ở 3 thuộc tính.

<code tabindex="0">code snippet goes herecode>

8,

<code tabindex="0">code snippet goes herecode>

9 và

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

0 (có nhiều định nghĩa hơn trong , nhưng trình duyệt không hỗ trợ chúng)

Đây là một ví dụ tạo kiểu cho văn bản đã chọn trong một

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

1

  The quick brown fox jumps over the lazy dog.

7

Hãy thử chọn một số văn bản trong bản demo bên dưới để xem kết quả. Thật không may, iOS một lần nữa lại bị loại bỏ, nhưng những người khác sẽ thấy màu sắc đẹp hơn

Xem Lựa chọn văn bản tạo kiểu bút của Will Boyd (@lonekorean) trên CodePen

Có một khai báo khác,

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

2, được cho là giới hạn các lựa chọn văn bản trong một phần tử, giống như bạn thấy với một

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

3. Thật kỳ lạ, IE11 là trình duyệt cuối cùng hỗ trợ nó. Hiện tại không có trình duyệt hiện đại nào hỗ trợ nó

Điều đó nói rằng, tất cả các yếu tố có thể chỉnh sửa (chẳng hạn như

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

3) được coi như thể chúng có

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

2. Và các phần tử giả

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

6 và

code {
  -webkit-user-select: all;
  user-select: all;
}

code:focus {
  animation: select 100ms step-end forwards;
}

@keyframes select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

7 không thể chọn được, như thể chúng có

<code tabindex="0">code snippet goes herecode>

6. Bạn không thể ghi đè những hành vi này

Bài viết này viết về CSS, nhưng sẽ thật thiếu sót nếu không đề cập đến JavaScript liên quan

Nếu bạn muốn toàn quyền kiểm soát các lựa chọn văn bản, với khả năng tạo và sửa đổi chúng theo ý muốn, thì hãy xem API lựa chọn JavaScript. Nếu mục tiêu cuối cùng là sao chép/dán văn bản thì bạn nên biết rằng JavaScript cũng cho phép bạn tương tác với khay nhớ tạm

Có bộ chọn CSS nào cho các phần tử chứa văn bản nhất định không?

Làm cách nào để sử dụng bộ chọn CSS cho văn bản?