Chúng ta có thể tạo hình ảnh con trỏ tùy chỉnh với các định dạng như .cur (cho Internet Explorer), .gif và .png (cho Chrome, Firefox, Safari) và áp dụng nó cho một phần tử bằng thuộc tính CSS cursor, đặt giá trị là url() và thêm một giá trị con trỏ chung (generic cursor) như auto, default, pointer, v.v. để fallback.
Giải pháp
Selector {
cursor: url("/*đường dẫn đến file cursor tùy chỉnh*/"), generic-cursor;
}
Ví dụ: Custom cursor cho button
<!DOCTYPE html>
<html>
<head>
<title>Custom Cursor Using CSS</title>
<style>
form { width: 70%; margin: 0 auto; text-align: center; }
* { padding: 2px; margin: 5px; }
input[type="button"] { border-radius: 10px; }
#tech1 { cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto; }
#tech2 { cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Custom Cursor Using CSS</legend>
<h1>Learn</h1>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
</body></html>
Kết quả
Khi di chuột qua nút 'DBMS':
Khi di chuột qua nút 'Python':
Các giá trị cursor phổ biến (fallback):
| Giá trị | Mô tả |
|---|---|
auto | Mặc định, trình duyệt quyết định |
default | Mũi tên mặc định |
pointer | Bàn tay chỉ (link, button) |
text | I-beam (văn bản) |
wait | Đồng hồ cát / loading |
help | Dấu hỏi |
move | Di chuyển (4 mũi tên) |
not-allowed | Dấu cấm (đã disable) |
grab/grabbing | Kéo thả |
zoom-in/zoom-out | Phóng to/thu nhỏ |
Lưu ý:
- Kích thước cursor tùy chỉnh khuyến nghị: 32x32px hoặc nhỏ hơn (giới hạn OS)
- Luôn cung cấp fallback generic cursor
- Có thể chỉ định hotspot:
cursor: url("cursor.png") 16 16, auto;(x, y từ góc trên trái) - SVG cursor được hỗ trợ tốt trên browser hiện đại