溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用CSS怎么實現一個單選框和復選框功能？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
在html中，<label>標簽通常和<input>標簽一起使用，<label>標簽為input元素定義標注（標記）。label 元素不會向用戶呈現任何特殊效果，<label>標簽的作用是為鼠標用戶改進了可用性，當用戶點擊<label>標簽中的內容時，瀏覽器就會自動將焦點轉到和該標簽相關聯的控件上；<label>標簽在單選按鈕和復選按鈕上經常被使用，使用該標簽后，你點擊label標簽內的內容，也可以選中對應的單選按鈕或復選按鈕。
<label>標簽語法格式：
<label for="關聯控件的id" form="所屬表單id列表">文本內容</label>
關聯控件的id一般指的是input元素的id；在html5中還新增了一個屬性form，form屬性是用來規定所屬的一個或多個表單的 id 列表，以空格隔開；當<label>標簽不在表單標簽<form>中時，就需要使用form屬性來指定所屬表單；
<label> 元素沒有特別的樣式考慮——結構上，<label> 是簡單的行內元素，所以可使用和 <span> 或 <a>元素大致相同的方式來應用樣式。
2.2 CSS3 box-shadow 屬性
boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
2.3 CSS3 transition 屬性
transition 屬性用來設置元素過渡效果，四個簡寫屬性為：
transition-property
transition-duration
transition-timing-function
transition-delay
語法
transition: property duration timing-function delay;
2.4 CSS3 :checked 選擇器
:checked 選擇器匹配每個選中的輸入元素（僅適用于單選按鈕或復選框）。
2.5 CSS element+element 選擇器
element+element 選擇器用于選擇（不是內部）指定的第一個元素之后緊跟的元素。
例如：選擇所有緊接著 <div> 元素之后的第一個 <p> 元素:
div+p{ background-color:yellow; }
3 代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#main {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#wrap {
position: relative;
margin: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: #9E9E9E;
position: relative;
box-shadow: 0 0 0 3px #dbe0e3;
transition: all 0.5s;
cursor: pointer;
}
.item img {
width: 20px;
height: 20px;
position: absolute;
bottom: 0px;
right: 0px;
opacity: 0;
}
input[type="radio"],
input[type="checkbox"] {
display: none;
}
input:checked+label .item {
box-shadow: 0 0 0 3px #00a3ff;
color: #FFFFFF;
background-color: #efad4c;
}
input:checked+label .item img {
opacity: 1;
}
.content {
font-size: 30px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="main">
<h2>多選</h2>
<div id="wrap">
<input type="checkbox" name="1" id="item1" />
<label for="item1">
<div class="item">
<div class="content">
1
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="checkbox" name="1" id="item2" />
<label for="item2">
<div class="item">
<div class="content">
2
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="checkbox" name="1" id="item3" />
<label for="item3">
<div class="item">
<div class="content">
3
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="checkbox" name="1" id="item4" />
<label for="item4">
<div class="item">
<div class="content">
4
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="checkbox" name="1" id="item5" />
<label for="item5">
<div class="item">
<div class="content">
5
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<h2>單選</h2>
<div id="wrap">
<input type="radio" name="1" id="item6" />
<label for="item6">
<div class="item">
<div class="content">
1
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="radio" name="1" id="item7" />
<label for="item7">
<div class="item">
<div class="content">
2
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="radio" name="1" id="item8" />
<label for="item8">
<div class="item">
<div class="content">
3
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="radio" name="1" id="item9" />
<label for="item9">
<div class="item">
<div class="content">
4
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="radio" name="1" id="item10" />
<label for="item10">
<div class="item">
<div class="content">
5
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
</div>
</body>
</html>關于使用CSS怎么實現一個單選框和復選框功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
