<div class="container">
<input type="text" value="Trường này con trỏ có màu mặc định" autocomplete="off">
<input type="text" value="Trường này con trỏ có màu đỏ" class="custom" autocomplete="off">
<p class="custom" contenteditable="true">Đoạn văn bản này chỉnh sửa được. Màu con trỏ cũng đã đổi thành xanh</p>
</div>
body {
height: 100vh;
display: grid;
place-items: center;
font-family: Arial, sans-serif;
}
.container {
width: calc(100% - 9em);
}
input {
caret-color: auto;
display: block;
margin-bottom: .5em;
width: 100%;
font-family: Arial, sans-serif;
height: 25px;
}
input.custom {
caret-color: red;
}
p.custom {
caret-color: green;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.