Custom input với accent-color trong CSS

Khái niệm

Thuộc tính accent-color trong CSS được sử dụng để tô màu lên những khu vực được chọn (active) trong các thẻ input form HTML.

Việc custom input form HTML là việc tất yếu bởi nó sẽ giúp design của web trông đẹp và thân thiện với người dùng hơn. Tùy vào mức độ design mà sẽ cần có nhiều kỉ thuật khác nhau, tuy nhiên nếu chỉ muốn thay đổi màu sắc của những input active ở HTML với accent-color chỉ cần một dòng CSS là đủ.

Pham vi sử dụng accent-color trong CSS

Không phải bất cứ input nào củng có thể sử dụng accent-color CSS, hãy nhớ rằng accent-color được sử dụng để custom màu sắc cho phần được chọn trong mỗi input, vậy ở đây accent-color chỉ được sử dụng trong các input HTML có tính năng chọn ví dụ như:

Checkbox input.
Radio input.
Range input.
Progress.

Triển khai

Custom checkbox input với accent-color trong CSS

 Value 1 

 Value 2 

 Value 3

input[type="checkbox"]{
    accent-color: red;
}

Custom radio input với accent-color trong CSS

 Value 1 

 Value 2 

 Value 3

input[type="radio"]{
    accent-color: red;
}

Custom range input với accent-color trong CSS

input[type="range"]{
    accent-color: red;
}

Custom Progress với accent-color trong CSS

Downloading progress:
 32%

progress{
    accent-color: red;
}

Tổng kết

Vậy là từ nay để có thể custom lại màu sắc cho input đơn giản ta chỉ cần dùng thuộc tính accent-color trong CSS. Mong rằng bài viết này sẽ hửu ích dành cho bạn. Bài viết này được soạn thảo bởi Lùn Dev.