单击 html & CSS 后更改复选框按钮 "text and icon"

Question

我有一个带有文本和图标“SELECT ALL and circle icon”的复选框按钮，我想在选中时将文本和图标更改为“SELECTED and icon circle check”。我已经可以更改按钮颜色，但我不知道如何处理文本和图标。欢迎任何帮助。

下面是 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> &nbsp;SELECT ALL</span>
   </label>
</div>
  
</body>
</html>

Answer 1

Link for codepen

Link for javascript adding class

Link for css content

使用 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);

从 html

中删除 "select all" 范围内的文本

添加 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> &nbsp;</span>
   </label>
</div>
  
</body>
</html>

单击 html & CSS 后更改复选框按钮 "text and icon"

Change checkbox button "text and icon" after click html & CSS

html

css

checkbox