我有一個包含文本和圖示“選擇全部和圓圖示”的復選框按鈕，我想在選中“選擇和圖示圓圈”時更改文本和圖示。我已經可以更改按鈕顏色，但我不知道如何處理文本和圖示。歡迎任何幫助。
下面是 HTML 和 CSS 代碼：
.select{
margin: 4px;
background-color: #06213B;
border-radius: 4px;
border: 0px solid #fff;
overflow: hidden;
float: left;
}
.select label {
float: left; line-height: 4.0em;
width: 26.0em; height: 4.0em;
}
.select label span {
text-align: center;
padding: 0px 0;
display: block;
}
.select label input {
position: absolute;
display: none;
color: #fff !important;
}
/* selects all of the text within the input element and changes the color of the text */
.select label input span{color: #fff;
font-size: 19px;
font-weight: 500;
font-family: default;
}
/* This will declare how a selected input will look giving generic properties */
.select input:checked span {
color: #ffffff;
text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.select input:checked span{background-color: #78E821;}<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<div class="select action">
<label>
<input type="checkbox" value="1"><span><i class="fa-solid fa-circle"></i> SELECT ALL</span>
</label>
</div>
</body>
</html>uj5u.com熱心網友回復：
codepen的鏈接
javascript添加類的鏈接
CSS內容的鏈接
使用 css 更改文本：
input[type="checkbox"] span:after{
content: "Select all";
}
input[type="checkbox"]:checked span:after{
content: "Your text";
}
用javascript改變圖示：
document.getElementById ('checkbox').addEventListener ('click', function (ev) {
document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-square');
}, false);
"select all"從 html 中洗掉span 中的文本
在 html 中添加您輸入的 id<input id="checkbox"><input/>
和<i id="icon"><i/>
document.getElementById ('checkbox').addEventListener ('click', function (ev) {
document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-square');
}, false);.select{
margin: 4px;
background-color: #06213B;
border-radius: 4px;
border: 0px solid #fff;
overflow: hidden;
float: left;
}
.select label {
float: left; line-height: 4.0em;
width: 26.0em; height: 4.0em;
}
.select label span {
text-align: center;
padding: 0px 0;
display: block;
}
.select label input {
position: absolute;
display: none;
color: #fff !important;
}
/* selects all of the text within the input element and changes the color of the text */
.select label input span{color: #fff;
font-size: 19px;
font-weight: 500;
font-family: default;
}
/* This will declare how a selected input will look giving generic properties */
.select input:checked span {
color: #ffffff;
text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/
.select input:checked span{background-color: #78E821;}
input[type="checkbox"] span:after{
content: "Select all";
}
input[type="checkbox"]:checked span:after{
content: "Your text";
}<script src="https://kit.fontawesome.com/d093faef8e.js"></script>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<div class="select action">
<label>
<input type="checkbox" value="1" id="checkbox"><span><i class="fa-solid fa-circle" id="icon"></i> </span>
</label>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443713.html
上一篇：我需要如何使用尾風樣式？