Một số thuộc tính CSS ít biết cho các trường input form

Giới thiệu

CSS caret-color, pointer-events và tab-size là một số thuộc tính ít được biết đến cho các trường nhập liệu form. Thuộc tính caret-color cho phép chỉ định màu của con trỏ nhấp nháy, pointer-events giúp ngăn chặn người dùng tương tác với một phần tử. Cuối cùng, tab-size thiết lập lượng khoảng trắng được sử dụng bởi tab.

Ví dụ 1: tab-size và pointer-events

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau:

Ví dụ 2: caret-color cho input

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: