I created a custom checkbox using css3 and it turned out looking like this with the check slightly lower than where it should be...
Here is the html code applicable to this checkbox:
<div>
<input id='remember_me' type='checkbox'>
<label for='remember_me'>Remember me</label>
</div>
Here is the css code applicable to this checkbox:
input[type='checkbox'] + label:before {
content: "";
display: block;
float: left;
width: 12px;
height: 12px;
margin-right: 4px;
border: 1px solid white;
}
input[type='checkbox']:checked + label:before {
content:'✓';
color: white;
}
input[type='checkbox'] {
display: none;
}
div {
display: flex;
align-items: center;
}
Is there any way to move the check to the centre of the box?
demo - http://jsfiddle.net/victor_007/wv8ksqgL/3/
set line-height
input[type='checkbox']:checked + label:before {
content:'✓';
color: blue;
line-height: 14px;
}
Related
I'm learning css and html, I'm validating a registration form, I have the user terms checkbox but I can't change the background color:
This is the html code where I create the checkbox and the label:
<div class="checkbox-wrap checkbox-primary" id="checkboxdiv" name="checkboxdiv">
<input class="checkbox" type="checkbox" value="0" name="termsNewUser" id="termsNewUser">
<label class="checkbox-wrap checkbox-primary" for="termsNewUser" id="termsNewUserL" name="termsNewUserL">I do accept the <u>Terms and Conditions</u> of your site.
</label>
</div>
I tried some solutions like:
input[type="checkbox"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
accent-color: #9d3039;
}
And:
input[type=checkbox] {
transform: scale(1.5);
}
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 8px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
input[type=checkbox]:after,
input[type=checkbox]::after {
content: " ";
background-color: #fff;
display: inline-block;
margin-left: 10px;
padding-bottom: 5px;
color: #00BFF0;
width: 22px;
height: 25px;
visibility: visible;
border: 1px solid #00BFF0;
padding-left: 3px;
border-radius: 5px;
}
input[type=checkbox]:checked:after,
input[type=checkbox]:checked::after {
content: "\2714";
padding: -5px;
font-weight: bold;
}
I tried also to create a custom class and in the style.css set the accent there but nothing.
When you simply make a global definition like the one below, this color should change,
:root {
accent-color: red;
}
In your case, this change stays in the background since you have given the checkbox element visible hidden.
input[type=checkbox]:checked:after,
input[type=checkbox]:checked::after {
content: "\2714";
padding: -5px;
font-weight: bold;
background-color: red;
}
so in the checked state you can change the background color directly to get the same look.
demo https://jsfiddle.net/rjzw10cv/1/
ahh I remember having this issue. Here it is. Just change the background color and color to anything you'd like and you should be set. This can be done with any input type.
input[type="checkbox"]:checked+label:before {
background: #3d404e;
color: #F00;
content: "\2713";
text-align: center;
}
so your html code would be
<div class="checkbox-wrap checkbox-primary" id="checkboxdiv" name="checkboxdiv">
<input class="checkbox" type="checkbox" value="0" name="termsNewUser" id="termsNewUser">
<label class="checkbox-wrap checkbox-primary" for="termsNewUser" id="termsNewUserL" name="termsNewUserL">I do accept the <u>Terms and Conditions</u> of your site.
</label>
</div>
and your full css would be below, I added a margin-right:20px as to hide the large space behind the custom checkbox elements.
p {
margin: 5px 0;
padding: 0;
}
input[type="checkbox"] {
margin-right: -20px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
label {
cursor: pointer;
}
/* EDIT THE BACKGROUND VALUE FOR CUSTOM CHECKBOX bg COLOR FOR NOT CHECKED */
input[type="checkbox"]+label:before {
border: 1px solid #7f83a2;
content: "\00a0";
display: inline-block;
background: #000;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
/* EDIT THE BACKGROUND VALUE FOR CUSTOM CHECKBOX bg COLOR FOR CHECKED, CHANGE COLOR TO CHANGE CHECK MARK COLOR */
input[type="checkbox"]:checked+label:before {
background: #3d404e;
color: #ff0000;
content: "\2713";
text-align: center;
}
input[type="checkbox"]:checked+label:after {
font-weight: bold;
}
Here is a snippet:
p {
margin: 5px 0;
padding: 0;
}
input[type="checkbox"] {
margin-right: -20px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
label {
cursor: pointer;
}
/* EDIT THE BACKGROUND VALUE FOR CUSTOM CHECKBOX bg COLOR FOR NOT CHECKED */
input[type="checkbox"]+label:before {
border: 1px solid #7f83a2;
content: "\00a0";
display: inline-block;
background: #000;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
/* EDIT THE BACKGROUND VALUE FOR CUSTOM CHECKBOX bg COLOR FOR CHECKED, CHANGE COLOR TO CHANGE CHECK MARK COLOR */
input[type="checkbox"]:checked+label:before {
background: #3d404e;
color: #ff0000;
content: "\2713";
text-align: center;
}
input[type="checkbox"]:checked+label:after {
font-weight: bold;
}
<div class="checkbox-wrap checkbox-primary" id="checkboxdiv" name="checkboxdiv">
<input class="checkbox" type="checkbox" value="0" name="termsNewUser" id="termsNewUser">
<label class="checkbox-wrap checkbox-primary" for="termsNewUser" id="termsNewUserL" name="termsNewUserL">I do accept the <u>Terms and Conditions</u> of your site.
</label>
</div>
Input fields, selections dropdowns stopped working in IE.
Check boxes cant be checked, text fields have the placeholde text at plain text, dropdowns cant be activated.
If I click a checkbox, it dosent change. Dropdowns dont drops, and placeholder text in input type=text is plain text in the textbox.
Example with checkboxes:
HTML
<input type="checkbox" id="optionnewwomen" ng-click="includeNewProfilesListsearch('Kvinde', true)" ng-model="checkboxwomannewprofilessearch" ng-false-value="0" ng-true-value="1"
<label for="optionnewwomen"></label>
CSS:
input[type=radio], input[type=checkbox] {
display: none;
}
input[type=radio] + label::before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
vertical-align: middle;
margin-right: 8px;
background-color: #ffffff;
border-radius: 8px;
border: solid 2px #adadad;
}
input[type=checkbox] + label::before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
vertical-align: middle;
margin-right: 8px;
background-color: #ffffff;
border-radius: 3px;
border: solid 2px #adadad;
}
input[type=radio]:checked + label::before {
content: "\2022"; /* Bullet */
color: #21c365;
border: solid 2px #21c365;
background-color: #ffffff;
font-size: 2.5em;
text-align: center;
line-height: 13px;
}
input[type=checkbox]:checked + label::before {
content: "\2714"; /* Tick */
color: #21c365;
border: solid 2px #21c365;
background-color: #ffffff;
text-align: center;
line-height: 15px;
}
I found some articles about IE problems with ::before, but no clear solution to that problem. Anyone having experience with this problem?
I dont know if the problem is related to Angular, but I doubt it.
This line of yours
<input type="checkbox" id="optionnewwomen" ng-click="includeNewProfilesListsearch('Kvinde', true)" ng-model="checkboxwomannewprofilessearch" ng-false-value="0" ng-true-value="1"
<label for="optionnewwomen"></label>
I'm not sure but it seems like this typos is causing it.
Try changing into this;
<input type="checkbox" id="optionnewwomen" ng-click="includeNewProfilesListsearch('Kvinde', true)" ng-model="checkboxwomannewprofilessearch" ng-false-value="0" ng-true-value="1">
<label for="optionnewwomen">Label here</label>
I'm not sure, but your missing the closing tags ">" in your input this might the cause why your checkbox is not rendered properly.
I have to following HTML:
<div>
<input id="check" type="checkbox" />
<label for="check"><span>Test label</span></label>
</div>
I want to style a checkbox + label certain way. To do that, I use
input[type=checkbox] {
display: none;
}
to remove the checkbox, and then add a own custom box with:
input[type=checkbox] + label {
position: absolute;
border-radius: 2px;
background-color: #baccdc;
width: 21px;
height: 21px;
white-space: nowrap;
padding-left: 21px;
cursor: pointer;
}
So, this works fine in every browser. Now, however, I want to change the style on :hover like this:
input[type=checkbox]:hover + label {
background-color: green;
display: block;
}
This works in Chrome just after I clicked on the checkbox, and then, for a short amount of time, the :hover style appears.
In Firefox, this style always appears on :hover.
Here is a JSFiddle.
Is it a common Chrome problem or a mistake in my CSS?
input[type=checkbox] {
display: none;
}
label span {
display: block;
margin-left: 5px;
}
input[type=checkbox] + label {
position: absolute;
border-radius: 2px;
background-color: #baccdc;
width: 21px;
height: 21px;
white-space: nowrap;
padding-left: 21px;
cursor: pointer;
}
input[type=checkbox] + label:hover {
background-color: green;
display: block;
}
input[type=checkbox]:checked + label {
background-color: yellow;
display: block;
}
<div>
<input id="check" type="checkbox" />
<label for="check"><span>Test label</span></label>
</div>
Try putting the :hover effect on the label :
<div>
<input id="check" type="checkbox"/>
<label for="check"><span>Test label</span></label>
</div>
CSS:
input[type=checkbox] + label:hover
{
background-color: green;
display: block;
}
Here is a Demo for the same
It seems to have an issue with the display: none; state of the input.
Here's a workaround that works fine in Chrome too :
#groupInput label:hover {
background-color: green;
display: block;
}
Fiddle
Im trying to make this work on safari, but I haven't been able to, no matter what. It works fine on chrome/ff.
Im trying to do an expand box on click, here my code, Thanks in advance for any help:
<input class="toggle-box" id="header1" type="checkbox" >
<label for="header1">Click here</label>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing.</span>
css:
<style>
.toggle-box {
display: none;
}
.toggle-box + label {
cursor: pointer;
display: inline;
margin-bottom: 5px;
}
.toggle-box + label + span {
display: none;
margin-bottom: 10px;
}
.toggle-box:checked + label + span {
display: inline;
}
.toggle-box + label:before {
background-color: #4F5150;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-right: 5px;
text-align: center;
width: 20px;
}
.toggle-box:checked + label:before {
content: "\2212";
}
.rest{
display: inline!important;
}
</style>
I had a similar problem with Safari. For some reason, it seems to have problems toggling the display property.
I switched to
.hide {
opacity: 0
height: 0
}
now it seems to work. I guess visibility: hidden could work too.
You can use my toggle button
touch
<label>
<input type="checkbox">
<span class="toggle_background">
<div class="circle-icon"></div>
<div class="vertical_line"></div>
</span>
</label>
or search "autoprefixer" in google
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.