เราใช้คุณสมบัติลักษณะที่ปรากฏเพื่อจัดรูปแบบองค์ประกอบตามสไตล์ดั้งเดิมของแพลตฟอร์มของระบบปฏิบัติการของผู้ใช้
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติลักษณะที่ปรากฏ CSS มีดังต่อไปนี้ -
Selector {
appearance: /*value*/;
-webkit-appearance: /*value*/; /*for Safari and Chrome */
-moz-appearance: /*value*/; /*for Firefox */
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติลักษณะที่ปรากฏของ 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> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
ตัวอย่าง
<!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> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
