CSS caret-color, pointer-event và tab-size là một số thuộc tính ít được biết đến cho các trường nhập biểu mẫu. thuộc tính caret-color cho phép chúng tôi chỉ định màu của dấu mũ nhấp nháy trong khi các sự kiện con trỏ có thể giúp ngăn người dùng tìm thấy một phần tử. Cuối cùng, kích thước tab đặt lượng khoảng trắng được tab sử dụng.
Các ví dụ sau minh họa một số thuộc tính này.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
background-color: mistyrose;
}
p {
white-space: pre;
}
p:last-of-type {
tab-size: 32;
-moz-tab-size: 32;
pointer-events: none;
}
</style>
</head>
<body>
<p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
<p> Ut sed felis lobortis, <a href=#>fermentum magna vitae</a>, imperdiet lectus.</p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
form {
padding: 2%;
margin: 3%;
background-color: cadetblue;
text-align: center;
}
form:focus-within {
box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
input {
caret-color: navy;
font-size: 40px;
font-weight: large;
}
</style>
</head>
<body>
<form>
<select>
<option>.</option>
<option>..</option>
<option>...</option>
</select>
<input type="text" value="glee" />
</form>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
