資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會學
時尚
法律帶有 CSS 外觀屬性的自定義複選框
我們使用 appearance 屬性根據使用者作業系統的平臺原生風格對元素進行樣式化。自定義複選框外觀不同於預設複選框，選中後外觀會發生改變。
語法
CSS appearance 屬性的語法如下所示 −
Selector {
appearance: /*value*/;
-webkit-appearance: /*value*/; /*for Safari and Chrome */
-moz-appearance: /*value*/; /*for Firefox */
}
建立圓形自定義複選框
若要建立圓形自定義複選框，我們已設定帶有 border-radius 和 box-shadow 的以下樣式。appearance 設定為 none −
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%;
}
複選框選中後，我們已更改了帶有不同背景色、邊框和 box-shadow 的外觀 −
input[type=checkbox]:checked {
background-color: coral;
border: 6px solid cornflowerblue;
box-shadow: 0 1px 2px lightorange;
}
示例
讓我們看一個建立圓形自定義複選框的示例 −
<!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>
<h1>Education</h1>
<p>Select the degree(s):</p>
<input type="checkbox"> MCA
<input type="checkbox"> BCA
</body>
</html>
建立矩形自定義複選框
若要建立矩形自定義複選框，我們已設定帶有 border-radius 和 box-shadow 的以下樣式。appearance 設定為 none −
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;
}
我們在選中複選框後使用以下 HTML Unicode 字元對其進行設定 −
content:"\2713";
示例
讓我們看一個建立圓形自定義複選框的示例 −
<!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>
<h1>Hobbies</h1>
<p>Select your hobbies:</p>
<input type="checkbox"> Playing Cricket
<input type="checkbox"> Watching Movies
<input type="checkbox"> Gardening
</body>
</html>
更新於：31-10-2023
2K+ 閱讀量
廣告