Người dùng chọn - Thủ thuật CSS

Anonim

Các user-selectbất động sản trong CSS kiểm soát cách văn bản trong một yếu tố được cho phép để được lựa chọn. Ví dụ, nó có thể được sử dụng để làm cho văn bản không được chọn.

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

Điều này hữu ích trong những trường hợp bạn muốn cung cấp trải nghiệm sao chép / dán dễ dàng hơn / rõ ràng hơn cho người dùng (không để họ vô tình chọn văn bản những thứ vô dụng, như biểu tượng hoặc hình ảnh). Tuy nhiên nó có một chút lỗi. Firefox thực thi một thực tế là không thể sao chép bất kỳ đối sánh văn bản nào với bộ chọn đó. WebKit vẫn cho phép sao chép văn bản nếu bạn chọn các phần tử xung quanh nó.

Bạn cũng có thể sử dụng điều này để thực thi rằng toàn bộ phần tử được lựa chọn:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

Dưới đây là một số bản demo của những người đó:

Xem bản trình diễn do người dùng chọn Pen của Chris Coyier (@chriscoyier) trên CodePen.

Không có thông số kỹ thuật cho thuộc tính này trong một thời gian khá dài, nhưng bây giờ được đề cập trong Mô-đun giao diện người dùng cơ bản CSS cấp 4.

Giá trị mặc định là auto, làm cho việc lựa chọn diễn ra bình thường như bạn mong đợi. "Bình thường" là một chút phức tạp. Nó đáng được trích dẫn từ thông số kỹ thuật ở đây:

  • Trên các phần tử giả :: trước và :: sau, giá trị được tính là none
  • Nếu phần tử là phần tử có thể chỉnh sửa , giá trị được tính làcontain
  • Ngược lại, nếu giá trị được tính toán của user-select trên phần tử gốc của phần tử này all, thì giá trị được tính làall
  • Ngược lại, nếu giá trị được tính toán của user-select trên phần tử gốc của phần tử này none, thì giá trị được tính lànone
  • Nếu không, giá trị được tính là text

Nói cách khác, nó xếp tầng và đặt lại một cách thông minh về trạng thái nhạy cảm. Có vẻ như tính năng này có thể được sử dụng để làm cho các phần tử giả có thể chọn được, nhưng vẫn chưa có từ cuối cùng.

Cũ hơn / Sở hữu

Firefox hỗ trợ -moz-none, điều này giống như không có ngoại trừ việc nó có nghĩa là các phần tử phụ có thể ghi đè lên tầng và có thể chọn lại với -moz-user-select: text;Firefox 21, không có phần tử nào hoạt động như vậy -moz-none.

Internet Explorer cũng hỗ trợ một giá trị độc quyền cho đến nay element, trong đó bạn có thể chọn văn bản bên trong phần tử nhưng việc lựa chọn sẽ dừng lại ở giới hạn của phần tử đó.

Thêm thông tin

  • Tài liệu MDN
  • Khả năng tương tác của Lựa chọn người dùng

Hỗ trợ trình duyệt

Điều này đặc biệt dành cho -*-user-select: none;

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
4* 2 * 10 * 12 * 3.1 *

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 2.1 * 3.2 *