https://i.sstatic.net/znS8O.png
<div class="modal-footer">
<label class="checkbox-inline pull-left" for="rme" style="background-color: green;"><input type="checkbox" class="custom-checkbox checkbox-primary" id="rme"> Remember me</label>
<input type="submit" class="btn btn-success pull-right" value="Login">
</div>
How can I update the code above to change the background color of the checkbox to green?
Your current implementation uses Bootstrap's "custom" form controls, but there are some mistakes in your markup. The correct way to create a custom checkbox in Bootstrap 4 is as follows:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
The appearance of the custom checkbox is controlled by the custom-* CSS classes. By default, it uses Bootstrap's primary color, which is blue. If you want to change it to green, you can create your own custom CSS class. Here's an example with a new CSS class that allows you to switch between the default blue and the custom green color:
.custom-control-input-green:focus~.custom-control-label::before {
border-color: #28a745 !important;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}
.custom-control-input-green:checked~.custom-control-label::before {
border-color: #28a745 !important;
background-color: #28a745 !important;
}
.custom-control-input-green:focus:not(:checked)~.custom-control-label::before {
border-color: #5bd778 !important;
}
.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
background-color: #d6f5dd !important;
border-color: #d6f5dd !important;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-control custom-checkbox custom-checkbox-green">
<input type="checkbox" class="custom-control-input custom-control-input-green" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>Saoud, have you had a chance to review this informative tutorial on W3Schools?
There are numerous ways to achieve this customization. Additionally, several frameworks offer their own unique styles for checkboxes.
Here are some examples:
Typically, in these scenarios, you would override the default behavior and appearance of checkboxes by incorporating images or colors.
Include accent-color in the custom-checkbox class
.custom-checkbox {
color: green;
accent-color: currentcolor;
}
After clicking on the Compare link in the header, the compare.jsp page loads. However, after that, when I click on any other link in the header, the new URL is shown in the address bar but the page does not refresh with the new jsp content. Can someone a ...
Can someone guide me on how to create a $.tmpl ready function? In my code, I send the ajax json to my createForm function. var doFunction = { new: function() { $.ajax({ url: 'index.php?...', success: function(data) { cr ...
I am currently working on an angular application with a navigation bar composed of anchor tags. When the user logs in, I have an ngIf directive to display my profile icon with dropdown options. However, I am facing challenges in styling it correctly. I aim ...
I am tasked with creating a table where the first cell in each row displays the name of a store, and the subsequent cells display the names of terminals associated with that store. The current layout is shown below. Each store has a list of terminals. ...
Working with HTML <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <img src="..."> </td> </tr> </tbody> </table> Applying CSS rules * { border: none; ...
Calling all JS programmers! Here's a challenge for you, check out this demo: https://codepen.io/gschier/pen/jkivt I'm looking to tweak 'The pen is simple.' to be 'The pen issimple.' by removing the extra space after 'is& ...
Currently, I am working with an HTML canvas tag: <canvas id="myCanvas"></canvas> I have successfully created a drawing on this canvas, and it looks exactly how I wanted it to. However, when trying to convert it to a PNG file using html2canvas ...
Just a quick question - in my HTML, I have a simple textarea nested within the body tags. Within my JavaScript, I am using jQuery to ensure that the body element is dynamically resized to match the height of the window: $(function() { $("body").heigh ...
Unfortunately, Internet Explorer does not support the <blink> tag or the text-decoration:blink; style in CSS. Are there any alternative methods for creating blinking text in IE? ...
Perhaps my approach is not ideal, so please feel free to provide feedback if this is not considered best practice. I have created DIVs that contain a checkbox and label. These styled DIVs resemble buttons, and I have implemented code to allow users to tog ...
Is it possible to change the background color of a child element within a div that has a specific background color using CSS? See my explanation below. For example: .container[background-color=some color] .content { background-color: some other color ...
Using Bootstrap 4, I aim to customize the inline form in the navbar to have a specific width on laptops and extend to the full screen on mobile devices. Here is how it appears on my mobile device: https://i.sstatic.net/gjewu.png https://i.sstatic.net/KJh ...
I'm currently working on a project that involves using CSS and jQuery, but I've encountered an issue that I haven't been able to solve. https://i.sstatic.net/CSovs.png Here is the demo link: . When the second div is clicked, why does the t ...
Trying to achieve: Visit this link In my navigation menu, I have two folders with subpages under them. The CSS for displaying the page titles within the folder is as follows: .main-nav .subnav ul {display:none; transition: all 100ms ease-in-out; } .mai ...
Here is the initial structure that I have: <section id="content"> <div class="container participant"> <div class="row"> <div class="input-group"> <div class="input-group-prepend"> ...
https://i.sstatic.net/WthBW.png I'm struggling to generate the necessary code to display images properly on my website. Despite numerous attempts, I can't seem to position the images correctly and it's becoming quite challenging... Below i ...
I'm facing an issue with some straightforward code that I've written. $(function() { $("#tren").click(function() { $("#trens").toggleClass("show"); }); }); .show { color: "red"; } <ul> <li id="tren">Some text</li> < ...
Within my html file, I have the following code snippet: <ul style="list-style-type: none;"> {% for project in projects_using_each_technique[loop.index - 1] %} <li><a href="{{ url_for('show_project&ap ...
Hey everyone, I am facing an issue with trying to convert a string into HTML and display it in the EditText Control. Unfortunately, it is not working correctly. The problem seems to be that the span tags are not being recognized as HTML elements. <sp ...
Encountering an issue within my application dashboard, here's a direct screenshot: https://i.stack.imgur.com/sEMrM.png The problem is that the Calendar days are extending beyond the borders of the calendar box. To implement this, I simply utilized ...