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=radio] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px;
background-color: orange;
border-radius:50%;
}
input[type=radio]:checked {
background-color: magenta;
}
input[type=radio]:hover {
cursor: pointer;
}
</style>
<body>
Custom radio button example<br/>
<form>
<label for="r1">r1</label>
<input type="radio" id="r1" name="btn" value="v1">
<input type="radio" id="r2" name="btn" value="v2">
<label for="r2">r2</label>
</form>
</body>
</html> Điều này cho kết quả sau
Ví dụ
<!DOCTYPE html>
<html>
<style>
label {
display: flex;
align-items: top;
}
label input {
margin: 0px 10px 0px 10px;
}
input[type=checkbox] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: 3px ridge currentcolor;
border-radius: 60px;
box-sizing: content-box;
color: lightblue;
height: 60px;
padding: 2px 2px 2px 2px;
transition-duration: 280ms;
transition-property: border-color, color;
transition-timing-function: ease;
width: 20px;
}
input[type=checkbox]:checked {
color: lightgreen;
}
input[type=checkbox]::after {
background-color: currentcolor;
border-radius: 10px 10px 10px 10px;
content: "";
display: block;
height: 20px;
transform: translateY(0px);
transition: transform 300ms ease-in;
width: 20px ;
}
input[type=checkbox]:checked::after {
transform: translateY(40px);
}
</style>
<body>
<p>
Custom radio button example
<label for="crb">
Blue
<input id="crb" type="checkbox"/>
<br/><br/><br/>Green
</label>
</p>
</body>
</html> Điều này cho kết quả sau
