Chúng tôi sử dụng thuộc tính ngoại hình để tạo kiểu một phần tử theo kiểu gốc nền tảng của hệ điều hành của người dùng.
Cú pháp
Cú pháp của thuộc tính xuất hiện CSS như sau -
Selector {
appearance: /*value*/;
-webkit-appearance: /*value*/; /*for Safari and Chrome */
-moz-appearance: /*value*/; /*for Firefox */
} Ví dụ
Các ví dụ sau minh họa thuộc tính giao diện CSS.
<!DOCTYPE html>
<html>
<style>
input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px;
background-color: cyan;
box-shadow: inset 0 3px 3px 5px lightgreen;
border-radius:50%;
}
input[type=checkbox]:checked {
background-color: coral;
border: 6px solid cornflowerblue;
box-shadow: 0 1px 2px lightorange;
}
input[type=checkbox]:checked:after {
content:"Checked";
}
</style>
<body>
<input type="checkbox"> Custom Checkbox Example
</body>
</html> Điều này cho kết quả sau
Ví dụ
<!DOCTYPE html>
<html>
<style>
input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: cyan;
border-radius:5%;
}
input[type=checkbox]:checked {
background-color: magenta;
}
input[type=checkbox]:checked:before {
content:"\2713";
color: white;
padding: initial;
font-weight: bold;
}
</style>
<body>
<input type="checkbox"> Another Custom Checkbox Example
</body>
</html> Điều này cho kết quả sau
