I have a straightforward question that I've been struggling to find a simple answer for. Can anyone help me with this?
Here's the checkbox code I'm working with:
<input type="checkbox">
All I want to do is change the background color when this checkbox is checked. Is there an easy method to achieve this using CSS or JS?
To add color to the background when a checkbox is checked, you can utilize the :checked pseudo-class along with the :after pseudo-element.
Note: If you want a fully customized checkbox with a complete background, you'll need to style the checkbox using CSS.
input[type="checkbox"]:checked {
background: blue;
color: white;
}
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
color: white;
}
input[type="checkbox"]:after {
content: ' ';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(50deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}<input type="checkbox" />I recently made some updates to the code found in this reference link. Here are the essential elements you need to include:
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"] + label:before {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
input[type="checkbox"]:checked + label:before {
background: red;
color: green;
content: "\2713";
text-align: center;
}<input type="checkbox" id="Custom" name="Custom">
<label for="Custom">Custom Check</label>Embark on this Enlightening Link
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
margin: 0;
min-height: 300px;
}
header {
background-color: #f39821;
height: 150px;
}
.content {
background-color: #FFFFFF;
max-width: 80%;
padding: 8px 16px;
margin-top: -56px;
margin-right: auto;
margin-left: auto;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.checkbox {
font-family: 'Roboto', sans-serif;
margin-top: 8px;
margin-bottom: 8px;
}
.checkbox__input {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.checkbox__label {
font-size: 16px;
color: rgba(0, 0, 0, 0.87);
position: relative;
cursor: pointer;
line-height: 24px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 28px;
}
.checkbox__label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
margin: 3px;
border: 2px rgba(0, 0, 0, 0.54) solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.checkbox__input:checked ~ .checkbox...
My issue involves using an input with a dynamic datalist for auto completion. To achieve this, I've implemented the following approach: A key function in my process is as follows: $(function () { $("#to").on("input", function (e) { ...
Here is some code that I'm working with: <% // accessing content from a cdn api cloudinary.api.resources( { type: 'upload', prefix: '' }, (error, result) => { const assets = result.r ...
Within my perspective, I possess a collection of different statuses. <ul> <li>FIRST_STATUS</li> <li>SECOND_STATUS</li> <li>THIRD_STATUS</li> </ul> To continuously update the statuses in my contr ...
I am facing a challenge with my Ajax function that triggers automatically upon submitting a contact form. I need to ensure that this function only fires if the form passes model validation. Marriage.cs public class Marriage { [Required] [DisplayN ...
Consider this HTML setup: <div id="contentRead"> ... <div id="List"></div> </div> ... <div id="contentWrite"> ... <div id="List"></div> </div> ...
Currently, my API includes a user registration system that is utilized by a mobile application. Most of the URLs are restricted for anonymous users and require a token key for authorization, except for the register URL. The register URL needs to remain op ...
I am struggling with aligning the heading and entries in my table properly. https://i.stack.imgur.com/IYtY1.jpg My goal is to ensure that the heading and entries are perfectly aligned with each other. This is how my Table.jsx looks like: <div classNa ...
My goal is to display a success message once users successfully register without any errors. I have an errors reducer object in Redux that stores errors sent from the backend. The logic is set up so that if the errors object is empty, it shows the success ...
In the process of developing a program, I have included a feature where users can drag and drop .wav files into a playlist-container. These files are then played in the order they are arranged within the playlist-container. Currently, I am working on imple ...
I have been exploring the jQuery plugin chosen for a select box with autocomplete functionality. You can check it out here: Does anyone know how to customize the appearance of the text in the options of the select box? Is there a specific method within t ...
I am attempting to create a JavaScript function for an HTML button element. However, I have noticed that it causes the page to reload. Strangely, when I use an input with a button type, everything works perfectly. What could be causing this issue and why a ...
Is there a way to have jQuery datatables generate a row number column in the first column, similar to a datagrid in VB? This is what I'm aiming for: If you have any insights on how this can be achieved, please share! ...
Within my React application, I have implemented a callback method for deleting data from an API using the axios library: deleteBook(selectedBook) { this.setState({selectedBook:selectedBook}) axios.delete(this.apiBooks + '/' + this.select ...
For a coding challenge, I am working on a small python tool to download an entire website locally. In order to view the website offline, I need to convert all URLs to relative URLs. This is necessary to ensure that resource files (such as .js and .css) are ...
I have integrated a react form within my Django application, supported by the rest framework in the backend. When I submit the form without entering any value in the integer field, I encounter the following error message from the rest API: "a valid integer ...
VueRouter automatically includes a trailing slash before the child route's path. Consider this example of a route configuration: const routes = [ path: '/home', components: { default: HomeBase }, children: [ ...
When viewing the code below, you may notice that it displays correctly in Chrome or IE with the image set to be 200px wide. However, in Firefox and Opera, the max-width style seems to be completely ignored. Is there a reason for this inconsistency across b ...
I need to select every second iframe in the image provided. Is it possible to achieve this using nth-child? I have tried with the following code (unsuccessfully): #main iframe:nth-child(2n+2) ...
I have implemented a time countdown feature in my web app using this jQuery plugin. However, I am facing an issue where the countdown starts from the beginning every time the page is refreshed. I want the countdown to remain consistent for a month (30 days ...
Having trouble generating a gantt chart from a JSON string, specifically with parsing the JSON string into a JSON object. I have a variable myString containing a JSON string that looks like this: {"c": [{"v": "496"}, {"v": "Task name 1"}, {"v": "9, "}, { ...