Text selectionChange the way in which the content is selected when the user interacts with it. This paragraph will be entirely selected when clicked by the user. This paragraph has default select behavior. This paragraph will not be selectable when clicked by the user. <p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
Pointer eventsBootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.
This link can not be clicked. This link can be clicked (this is default behavior). This link can not be clicked because the pointer-events property is
inherited from its parent. However, this link has a pe-auto class and can be clicked. <p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
The .pe-none class (and the pointer-events CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with .pe-none are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard
users, you may need to add further attributes such as tabindex="-1" (to prevent them from receiving keyboard focus) and aria-disabled="true" (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the disabled HTML attribute instead. SassUtilities APIInteraction utilities are declared in our utilities API in scss/_utilities.scss.
Learn how to use the utilities API. "user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),
- Trang chủ
- Tham khảo
- CSS
- Thuộc tính cursor
Định nghĩa và sử dụngThuộc tính cursor hiển thị con trỏ chuột khi duy chuyển con trỏ vào thành phần. Cấu
trúcVới giá trị như sau: Hãy di chuyển con trỏ chuột tới từng dạng để thấy rõ sự hiện thị.
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|
| cursor
| auto
| cursor: auto;
| Trình duyệt tự động thiết lập con trỏ chuột, đây là dạng mặc định.
| | crosshair
| cursor: crosshair;
| Con trỏ chuột dạng crosshair.
| | default
| cursor: default;
| Con trỏ chuột dạng default.
| | e-resize
| cursor: e-resize;
| Con trỏ chuột dạng e-resize.
| | help
| cursor: help;
| Con trỏ chuột dạng help.
| | move
| cursor: move;
| Con trỏ chuột dạng move.
| | n-resize
| cursor: n-resize;
| Con trỏ chuột dạng n-resize.
| | ne-resize
| cursor: ne-resize;
| Con trỏ chuột dạng ne-resize.
| | nw-resize
| cursor: nw-resize;
| Con trỏ chuột dạng nw-resize.
| | pointer
| cursor: pointer;
| Con trỏ chuột dạng pointer.
| | progress
| cursor: progress;
| Con trỏ chuột dạng progress.
| | s-resize
| cursor: s-resize;
| Con trỏ chuột dạng s-resize.
| | se-resize
| cursor: se-resize;
| Con trỏ chuột dạng se-resize.
| | sw-resize
| cursor: sw-resize;
| Con trỏ chuột dạng sw-resize.
| | text
| cursor: text;
| Con trỏ chuột dạng text.
| | w-resize
| cursor: w-resize;
| Con trỏ chuột dạng w-resize.
| | wait
| cursor: wait;
| Con trỏ chuột dạng wait.
| | inherit
| cursor: inherit;
| Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
|
Ví dụHTML viết:<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html> Hiển thị trình duyệt khi chưa có CSS:CSS viết:Hiển thị trình duyệt khi có CSS:Di chuyển con trỏ vào text sẽ thấy hiệu ứng. Trình duyệt hỗ trợThuộc tính cursor được hỗ trợ trong đa số các trình duyệt. Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có
!Doctype | 
