I am trying to lower the brightness(when off) of an existing radio button from jQuery mobile using CSS. I have tried the following in my html file -
<style>
.ui-grid-b .ui-block-b: flip-select.label{
text-indent: 60%;
}
#flip-select{
text-indent: 60%;
}
#radio-choice-h-2a:true{
filter:brightness(50%);
}
.ui-radio .ui-btn.ui-radio-off:after {
filter: brightness(50%);
}
</style>
This is the html part for the radio from jQuery mobile 1.4.5 demos -
<div class="ui-grid-b">
<div class="ui-block-a"><!--row 1 block a-->
<!--radio button 1-->
<fieldset id="radio-choice-h-2" data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>NLED</legend>
<input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio">
<label style="background-color: #ff0000" for="radio-choice-h-2a">ON</label>
I see no changes after I put the CSS internal style element in. Am I doing something wrong? I have noticed similar posts. But I want to make changes to an existing radio button
This is for running a webpage on touchscreens.
Try this code: If you want to decrease the brightness or change the color of the radio button the you can easily change the background color.
.ui-grid-b{
margin: 10px;
}
fieldset {
position: relative;
padding-left: 24px;
margin-bottom: 12px;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 40px;
}
fieldset input {
position: absolute;
opacity: 0;
cursor: pointer;
}
label:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 4px;
height: 15px;
width: 15px;
border: 1px solid #383838;
border-radius: 50%;
}
label:before {
content: "";
position: absolute;
display: none;
}
fieldset input:checked + label:before {
display: block;
}
fieldset label:before {
top: 56%;
left: 7px;
width: 11px;
display: none;
height: 11px;
border-radius: 50%;
background: #d61722;
}
<div class="ui-grid-b">
<div class="ui-block-a"><!--row 1 block a-->
<!--radio button 1-->
<fieldset id="radio-choice-h-2" data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>NLED</legend>
<input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio">
<label style="background-color: #ff0000" for="radio-choice-h-2a">ON</label>
</fieldset>
</div>
</div>
Related
I would like some assistance with my accordion code,
My idea is to get something like this:
The Radio Button Method adds a hidden radio input and a label tag to each accordion tab.
The logic is straightforward:
when a user selects a tab, they essentially check the radio button associated with that tab.
when a user clicks the next tab in the accordion, the next radio button is selected, and so on.
Only one tab can be open at a time using this method.
I'd like some advice on how to incorporate this into my current accordion code.
<!doctype html>
<html>
<head>
<style>
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative; /* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input + label + .collapse {
display: none;
}
input:checked + label + .collapse {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<input type="checkbox" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
</body>
</html>
No need to change the CSS (at least the part handling the accordion functionality) but you'd have to change a bit in your HTML.
To get the desired accordion effect where only one tab can be open at a time you should:
use radio buttons instead of checkboxes (input[type="radio"]).
And the important part is to give those radio buttons the same name (the attribute name must be the same for all the accordion component's radio buttons) in order to achieve the desired outcome.
Here's a a live demo:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title1" />
<label for="title1">Accordion 1</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
<!-- changed "type=checkbox" to "type=radio" -->
<!-- added the same "name" attribute value for all the radio buttons -->
<input type="radio" name="radio-btn" id="title2" />
<label for="title2">Accordion 2</label>
<div class="collapse">
<p>Your content goes here inside this division with the class "content".</p>
</div>
CAUTION: Even though the radio buttons hack works as needed, there is no way you can close all the accordion items after interacting for the first time (you can have a closed accordion initially though).
I have found this example using Sass that looks exactly like what you need: https://codepen.io/alvarotrigo/pen/dyJbqpd.
The example uses radio buttons, such as <input type="radio" id="title1" name="select"/>. Because they have the same name, you can only select one at a time.
In your example, you have checkboxes like in this example at w3schools.com. Using checkboxes, you can tick any number of checkboxes at a time, therefore the current accordion behavior.
Here's a stripped-down version (converted to CSS):
input {
position: absolute;
opacity: 0;
z-index: -1;
}
.tab {
overflow: hidden;
}
.tab-label {
display: flex;
justify-content: space-between;
padding: 1em;
background: #2c3e50;
color: white;
cursor: pointer;
}
.tab-content {
max-height: 0;
padding: 0 1em;
color: #2c3e50;
background: white;
}
input:checked ~ .tab-content {
max-height: 100vh;
padding: 1em;
}
<div class="tab">
<input type="radio" id="rd1" name="rd">
<label class="tab-label" for="rd1">Item 1</label>
<div class="tab-content">Content</div>
</div>
<div class="tab">
<input type="radio" id="rd2" name="rd">
<label class="tab-label" for="rd2">Item 2</label>
<div class="tab-content">Content</div>
</div>
I have slightly changed your code and added another div with overflow: hidden:
/** nothing changed on the CSS part, see the HTML part for the required changes */
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
position: relative;
/* ADDING THIS IS REQUIRED */
}
label:hover {
background: #4E8774;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked+label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input+label+.collapse {
display: none;
}
input:checked+label+.collapse {
display: block;
}
<div class="tab">
<input type="radio" id="title1" name="select"/>
<label for="title1">Accordion 1</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>
<div class="tab">
<input type="radio" id="title2" name="select" />
<label for="title2">Accordion 2</label>
<div class="collapse">
Your content goes here inside this division with the class "content".
</div>
</div>
I learned checkbox hack on stackoverflow the other day and I successfully applied it to making a dialog to open on click of a text. However, now I want to close the dialog when "X" is clicked. Below is what I have attempted up to now, but to no avail:
https://jsfiddle.net/gmcy12zv/5/
HTML
<div style="height:100px">
</div>
<div class="tooltip">
<input type="checkbox" id="clickhere" />
<label for="clickhere">
<div class="click-msg">click here</div>
</label>
<div class="tooltiptext">
<input type="checkbox" id="closeCheck"/>
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
I want "tooltiptext" to disappear when X button for div "close" is clicked.
CSS
#clickhere {
display: none;
}
#clickhere:not(:checked) ~ .tooltiptext {
display:none;
}
#clickhere:checked ~ .tooltiptext {
visibility: visible;
}
#closeCheck {
display: none;
}
/* #closeCheck:not(:checked) ~.tooltiptext {
visibility: visible;
} */
#closeCheck:checked ~.tooltiptext {
display:none;
}
.click-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip .close{
position: absolute;
top: 5px;
right: 5px;
}
.tooltip {
text-align: right;
position: relative;
display: block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
/* .tooltip:hover .tooltiptext {
visibility: visible;
} */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
border-style: solid;
border-width: 5px;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 150%;
left: 80%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
top: 100%;
left: 90%;
margin-left: -5px;
border-color: black transparent transparent transparent;
}
where am I going wrong in my approach ? is this because two checkboxes are almost nexted?
You are working with checkboxes. The checkbox hack in this case is not the best way. The "click here" text is actually a checkbox where you are providing a property checked in CSS ,this can be achived by adding another checkbox at the close button to work exactly as the one you used to open but I will not suggest that. I suggest the best practice is to use JavaScript click events. I have changed your code .I added some javascript and edited some HTML ansd CSS . Youn can check it out ,it works perfectly the way you wanted.
var dialog= document.querySelector(".tooltiptext");
var openBtn = document.querySelector(".price-line");
var closeBtn = document.querySelector(".close");
openBtn.addEventListener("click",()=>{
dialog.style.display ="block";
});
closeBtn.addEventListener("click",()=>{
dialog.style.display ="none";
})
.price-line{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
/*
.price-line:active .tooltiptext {
visibility: visible;
}
.tooltiptext:hover {
visibility: visible;
}
*/
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip .close{
position: absolute;
top: 5px;
right: 5px;
}
.tooltip {
text-align: right;
position: relative;
display: block;
}
.tooltip .tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
/* .tooltip:hover .tooltiptext {
visibility: visible;
} */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
border-style: solid;
border-width: 5px;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 150%;
left: 80%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
top: 100%;
left: 90%;
margin-left: -5px;
border-color: black transparent transparent transparent;
}
<div style="height:100px">
</div>
<div class="tooltip">
<label for="clickhere">
<div class="price-line">click here</div>
</label>
<div class="tooltiptext">
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
Using only CSS.
Place the #closeCheck on top of .tooltip or .tooltiptext:
<input type="checkbox" id="closeCheck" />
<div class="tooltip"><!...->
Next hide #closeCheck and when it's checked hide .tooltiptext
#closeCheck {display:none;}
#closeCheck:checked + .tooltip .tooltiptext {display: none;}
That "+" is an adjacent sibling combinator which singles out the tag
positioned immediately next.
Example A is the fixed OP code
Example B is a different layout with a better strategy.
Example A
#closeCheck {
display: none;
}
#closeCheck:checked+.tooltip .tooltiptext {
display: none;
}
<input type="checkbox" id="closeCheck" />
<div class="tooltip">
<input type="checkbox" id="clickhere" />
<label for="clickhere">
<div class="click-msg">click here</div>
</label>
<div class="tooltiptext">
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
Example B
.dialog {
margin-bottom: 8px;
}
legend,
menu {
display: inline-block;
float: right;
}
label {
padding: 3px 5px;
border: 2px inset lightgrey;
border-radius: 4px;
cursor: pointer;
}
#switchA,
#switchB,
.dialog {
display: none
}
#switchA:checked+.open {
display: none
}
#switchA:checked~.dialog.A {
display: block;
}
#switchB:checked+.dialog.B {
display: block;
}
<input id='switchA' type='checkbox'>
<label for='switchA' class='open A'>Open</label>
<fieldset class='dialog A'>
<legend><label for='switchA'>X</label></legend>
<p>Beth, your son is dying! Say good-bye! Yo! What up my glip glops! Crystal poachers. There's no lower form of life. They think the galaxy's their own personal piggy bank. You can run, but you can't hide bitch! </p>
<menu>
<label for='switchA'>Cancel</label>
<label for='switchB'>Next</label>
</menu>
</fieldset>
<input id='switchB' type='checkbox'>
<fieldset class='dialog B'>
<legend><label for='switchB'>X</label></legend>
<p>Where are my testicles, Summer? I'm man enough to simply say, 'I'm going to poop', and I'd be honored to have Ron Howard involved. Dont look at me! That guy over there roped me into this. Dont mind those stare goblins.</p>
<menu>
<label for='switchB'>Cancel</label>
</menu>
</fieldset>
Its very simply and I have looked at all these examples but still am not able to figure out what I am doing wrong!
I have created a custom checkbox, increased the size and style, and when it is clicked I want the letter "A" to appear in the box, but it simply will not respond, maybe a second pair of eyes will help me identify the problem.
below is my html and css:
.container {
position: relative;
cursor: pointer;
display: block;
input,
label {
display: inline-block;
}
input {
// opacity: 0;
position: absolute;
height: unset;
width: unset;
cursor: pointer;
}
label::before {
border: 1px solid #333;
content: "";
display: inline-block;
font: 16px/1em sans-serif;
height: 50px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 50px;
border-radius: 5px;
color: red;
font-size: 50px;
padding: 10px;
}
input[type="checkbox"]:checked + label::before {
content: "A"; //code for checked
}
}
<div class="container">
<div>
<label for="form_agreeTerms" class="required">Agree terms</label>
<input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">
</div>
</div>
Here it is in codepen
You using the + operator, which means "The next sibling element".
You must move the label to be after the checkbox.
<div class="container">
<div>
<input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">
<label for="form_agreeTerms" class="required">Agree terms</label>
</div>
</div>
I'm having a problem with setting up box & shadow around my radio button. My CSS sets box only around radio button and shows nasty white square box around it. How to set border or outline around whole Radio-button + text to make selection more distinctive.
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item input:checked {
/*border: 1px solid dodgerblue;*/
box-shadow: 3px 3px 11px 1px dodgerblue;
}
<div class="form-check enrgy-form">
<label class="form-check-label label-nowrapp selected-item">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()">Fuel-fired</label>
</div>
I think your best bet is to simulate the radio button with css so you can have the behavior you want.
You should first set the input to display: none and give it an id in your HTML so you can link it with the label, by giving the label a for attribute, this way you can control the check/uncheck of your radio button from the label.
Next you want to simulate the appearance of the radio button, i'll do this by adding two spans, one inside the other, so we can have a checked/unchecked status.
try this:
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item {
display: none;
}
.selected-item:checked + label {
box-shadow: 0px 0px 11px 2px dodgerblue;
}
label{
padding: 3px;
}
label .bullet{
border-radius: 50%;
border: 1px solid gray;
background-color: lightgray;
margin-right: 3px;
display: inline-block;
width: 10px;
height: 10px;
position: relative;
}
.selected-item:checked + label .bullet .bullet-selected{
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 5px;
height: 5px;
background-color: gray;
}
<div class="form-check enrgy-form">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()" id="someUniqueId"/>
<label class="form-check-label label-nowrapp" for="someUniqueId">
<span class="bullet">
<span class="bullet-selected"></span>
</span>
Fuel-fired
</label>
</div>
You could go the route where you style the whole radio button using :before and :after in CSS. That way you could even go nuts with animations and stuff...
It would require you to change the HTML a bit as well....
There's plenty of examples to be found if you search for "css custom radio".
[type="radio"]{
position: absolute;
left: -9999px;
}
[type="radio"] + label
{
position: relative;
padding: 0 20px;
cursor: pointer;
}
[type="radio"] + label:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked + label:before{
box-shadow: 0px 1px 11px 1px dodgerblue;
}
[type="radio"] + label:after{
content: '';
display: none;
width: 10px;
height: 10px;
background: gray;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
}
[type="radio"]:checked + label:after {
display: block;
}
<div class="form-check enrgy-form">
<input type="radio" name="energy" id="one">
<label for="one">Fuel-fired</label>
</input>
<input type="radio" name="energy" id="two">
<label for="two">Something else</label>
</input>
</div>
Update
Here is a possible solution, you could modify it as you want!
.form-check {
position: relative;
display: inline-flex;
align-items: center;
font-size: 1rem;
}
.form-check-label {
font-size: 0.9em;
margin-right: 0.25em;
white-space: nowrap;
}
.form-check-input {
margin: 0;
margin-right: 0.5em;
}
.form-check-input:checked + .form-check-label:after {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
border-radius: 1.5em 8px 8px 1.5em;
box-shadow: 3px 3px 11px 1px dodgerblue;
}
.medium { font-size: 2rem; }
.medium input[type=radio] { zoom: 2 }
.big { font-size: 3rem; }
.big input[type=radio] { zoom: 3 }
<div class="form-check">
<input id="inputcheck" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck" class="form-check-label">Fuel-fired normal</label>
</div>
<br><br>
<div class="form-check medium">
<input id="inputcheck1" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck1" class="form-check-label">Fuel-fired medium</label>
</div>
<br><br>
<div class="form-check big">
<input id="inputcheck2" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck2" class="form-check-label">Fuel-fired big</label>
</div>
The heading pretty much explains it. I have a couple of checkboxes inside a scrollable div. But for some reasons the 'background-color' attribute doesn't work. Although the 'margin-top' does seem to work...
Just puzzling me how one attribute can work and another not. It's also not like the div has it's own set of background color attributes that could potentially over ride the checkboxes attributes.
Anyways, below is my HTML (which is generated by JSP):
<div class="listContainer">
<input type="checkbox" class="oddRow">item1<br/>
<input type="checkbox" class="evenRow">item2<br/>
<input type="checkbox" class="oddRow">item3<br/>
<input type="checkbox" class="evenRow">item4<br/>
...
</div>
And here is my CSS:
.listContainer {
border:2px solid #ccc;
width:340px;
height: 225px;
overflow-y: scroll;
margin-top: 20px;
padding-left: 10px;
}
.oddRow {
margin-top: 5px;
background-color: #ffffff;
}
.evenRow{
margin-top: 5px;
background-color: #9FFF9D;
}
A checkbox does not have background color.
But to add the effect, you may wrap each checkbox with a div that has color:
<div class="evenRow">
<input type="checkbox" />
</div>
<div class="oddRow">
<input type="checkbox" />
</div>
<div class="evenRow">
<input type="checkbox" />
</div>
<div class="oddRow">
<input type="checkbox" />
</div>
In addition to the currently accepted answer: You can set border and background of a checkbox/radiobutton, but how it is rendered in the end depends on the browser. For example, if you set a red background on a checkbox
IE will show a red border instead
Opera will show a red background as intended
Firefox, Safari and Chrome will do nothing
This German language article compares a few browsers and explains at least the IE behavior. It maybe bit older (still including Netscape), but when you test around you'll notice that not much has changed. Another comparison can be found here.
You can use peseudo elements like this:
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 8px;
cursor: pointer;
font-size: 27px;
}
input[type=checkbox]:after {
content: " ";
background-color: #9FFF9D;
display: inline-block;
visibility: visible;
}
input[type=checkbox]:checked:after {
content: "\2714";
}
<label>Checkbox label
<input type="checkbox">
</label>
After so much trouble i got it.
.purple_checkbox:after {
content: " ";
background-color: #5C2799;
display: inline-block;
visibility: visible;
}
.purple_checkbox:checked:after {
content: "\2714";
box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
border-radius: 3px;
height: 12px;
display: block;
width: 12px;
text-align: center;
font-size: 9px;
color: white;
}
<input type="checkbox" class="purple_checkbox">
It will be like this when checked with this code.
My solution
Initially posted here.
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;
}
input[type="checkbox"]:checked {
background: #2aa1c0;
}
input[type="checkbox"]:hover {
filter: brightness(90%);
}
input[type="checkbox"]:disabled {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
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(45deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
input[type="checkbox"]:disabled:after {
border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>
2022 - there is a much better solution to this problem now
Just use the accent-color property and make sure you achieve proper contrast ratios for accessibility:
.blue-checkbox {
accent-color: #00eaff;
height: 30px; /* not needed */
width: 30px; /* not needed */
}
<input class="blue-checkbox" type="checkbox" />
We can provide background color from the css file. Try this one,
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
width: 25px;
height: 25px;
background: gray;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
position: relative;
left: -5px;
top: -5px;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: blue;
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 25px;
height: 25px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="checkbox-container">
<input type="checkbox" />
</div>
</body>
</html>
The Best solution to change background checkbox color
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
}
input[type=checkbox]:checked:after {
content: "✓";
font-size: 12px;
}
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br>
Improving another answer here
input[type=checkbox] {
cursor: pointer;
margin-right: 10px;
}
input[type=checkbox]:after {
content: " ";
background-color: lightgray;
display: inline-block;
position: relative;
top: -4px;
width: 24px;
height: 24px;
margin-right: 10px;
}
input[type=checkbox]:checked:after {
content: "\00a0\2714";
}
When you input the body tag, press space just one time without closing the tag and input bgcolor="red", just for instance. Then choose a diff color for your font.