資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時裝研究
法律研究帶有 CSS appearance 屬性的自定義單選按鈕
我們使用 appearance 屬性根據使用者的作業系統以本機樣式來設計元素。
語法
CSS appearance 屬性的語法如下 −
Selector {
appearance: /*value*/;
-webkit-appearance: /*value*/; /*for Safari and Chrome */
-moz-appearance: /*value*/; /*for Firefox */
}
建立自定義單選按鈕
要建立自定義自選框，我們設定了帶 border-radius 和 appearance 的以下樣式。appearance 設定為 none −
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;
示例
以下示例說明了自定義單選按鈕 −
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h1>Gender</h1><br/>
<form>
<label for="r1">Male</label>
<input type="radio" id="r1" name="btn" value="v1">
<input type="radio" id="r2" name="btn" value="v2">
<label for="r2">Female</label>
</form>
</body>
</html>
建立動畫自定義單選按鈕
要建立動畫自定義單選按鈕，我們將使用 transition 屬性設定過渡效果。還將使用 transform 屬性。在選中任何單選按鈕之前，使用 transition-duration、property 和 timing 設定以下樣式 −
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);
}
示例
以下示例說明了動畫自定義單選按鈕 −
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<p>
Custom radio button example
<label for="crb">
Blue
<input id="crb" type="checkbox"/>
<br/><br/><br/>Green
</label>
</p>
</body>
</html>
更新日期： 2023-11-01
947 次檢視
廣告