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>
<head>
<style>
input[type=number] {
width: 40px;
-moz-appearance: textfield;
}
input[type=number]:hover {
background-color: #e3f5a1;
}
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
</style>
</head>
<body>
<p>Type/Scroll to change value</p>
<input type="number" value="6">
</body>
</html> Điều này cho kết quả sau
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 20%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
</style>
</head>
<body>
Hiding dropdown arrow<br/><br/>
<select>
<option value="none" selected disabled hidden>
Select color
</option>
<option>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
<option>Orange</option>
</select>
</body>
</html> Điều này cho kết quả sau
