I have a checkbox button with text and icon "SELECT ALL and circle icon" and I wanted to change the text and icon when checked to "SELECTED and icon circle check". I can already change the button color but I don't know how to proceed with the text and Icon. Any help would be welcome please.
Here's the HTML and CSS code below:
.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>
Aucun commentaire:
Enregistrer un commentaire