I have created a span & an input checkbox, but can't figure out how to style the checked arrow by given design which is where the checkbox is checked:
HTML:
<label class="form-label">
<input id="checkbox" type="checkbox">
<span>title</span>
</label>
CSS:
.form-label {
display: inline-flex;
cursor: pointer;
position: relative;
}
.form-label > input {
height: 20px;
width: 20px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #CDCDCD;
border-radius: 4px;
outline: none;
background-color: #ffffff;
cursor: pointer;
}
.form-label > input:checked {
border: 1px solid #000000;
background-color: #ffffff;
}
.form-label > input:checked + span::before {
content: '\2713';
display: block;
text-align: center;
color: #000000;
position: absolute;
left: 4px;
top: -1px;
}
.form-label > input:checked + span::before:focus {
outline: none;
}
Created a Jsfiddle for the example https://jsfiddle.net/ev2pxynL/1/
Any help will be appreciated, been strugling with this basic problem for a while now.
I want to create the arrow exactly as in the design.
In your checkbox you are using content which is predefined style. just link fontawesome
css and change content
.form-label > input:checked + span::before {
content: '\f00c';
}
Or Just google how to make custom checkbox or checkout below link.
How TO - Custom Checkbox
Related
I want to customize a checkbox using the code below, but the styles are not being applied to my checkbox:
input[type=checkbox] {
display:none;
}
label + input[type=checkbox] {
background: green;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
label + input[type=checkbox]:checked {
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
<label for="thing">
<input type='checkbox' name='thing' value='valuable' id="thing"/>
</label>
JSFiddle Demo
Updated to reflect answer above using the appearance:none tag. Also works for accessibility.
label > input[type='checkbox'] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
background: green;
}
label > input[type='checkbox']:checked {
background: blue;
}
https://jsfiddle.net/b8uedf9p/
From your questions it seems you want a kind of css style on the check box. Try using appearance: none; to remove the default property of the checkbox. This way your css style will be applied. like so
input[type=checkbox] {
display:none;
}
label + input[type=checkbox]
{
background: green;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
label + input[type=checkbox]:checked
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<label for="thing">Checkbox</label><input type='checkbox' name='thing' value='valuable' id="thing"/>
I'm working on modifying an existing project which has some custom CSS styling for checkboxes. Currently the checkbox label is sitting to the right of the checkbox and I would like to move the checkbox to sit above the label. How can I achieve this using the following code?
<input type="checkbox" id="box-<%= tmp %>">
<label for="box-<%= tmp %>"><%= question.choiceAnswer[tmp] %></label>
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
text-align: center;
font-weight: 500;
font-size: 0.85em;
color: #232A33;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #232A33;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
From my understanding, the typical checkbox is no hidden and new checkbox is added through CSS, but I'm not sure how to move the label to be below the checkbox since the seem to be a single piece. Can I achieve this by modifying the above code or am I better off starting from scratch?
Thanks in advance!
Remove the left padding for the label and the absolute positioning for the pseudo element :before
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
position: relative;
margin-bottom: 20px;
text-align: center;
font-weight: 500;
font-size: 0.85em;
color: #232A33;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #232A33;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<input type="checkbox" id="box">
<label for="box">Label</label>
How do I align a label and a custom checkbox? The code snippet is below. I want to make sure that the label and switch are vertically aligned and I should also have the ability to use any text in the label. I cannot use the position:absolute method to align the label since the text might change and I dont want any overlap.
.switch {
position: relative;
display: inline-block;
}
.switch input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
outline: none;
height: 25px;
width: 50px;
border-radius: 25px;
background-color: #999;
}
.switch input[type="checkbox"]:checked {
background-color: green;
}
.switch input[type="checkbox"]:after {
position: absolute;
content: ' ';
height: 16.66667px;
width: 16.66667px;
top: 6.5px;
right: 33px;
border-radius: 11.11111px;
background: #fff;
}
.switch input[type="checkbox"]:checked::after {
right: 6px;
}
<div class="switch">
<label for="checkbox1">Test Test Test Test</label>
<input type="checkbox" id="checkbox1">
</div>
You should be able to use the vertical-align property on the input (ex: vertical-align: middle;):
.switch {
position: relative;
display: inline-block;
}
.switch input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
outline: none;
height: 25px;
width: 50px;
border-radius: 25px;
background-color: #999;
vertical-align: middle;
}
.switch input[type="checkbox"]:checked {
background-color: green;
}
.switch input[type="checkbox"]:after {
position: absolute;
content: ' ';
height: 16.66667px;
width: 16.66667px;
top: 6.5px;
right: 33px;
border-radius: 11.11111px;
background: #fff;
}
.switch input[type="checkbox"]:checked::after {
right: 6px;
}
<div class="switch">
<label for="checkbox1">Test Test Test Test</label>
<input type="checkbox" id="checkbox1">
</div>
I have a custom checkbox it's working nicely but i have some problems having the alignment of the span inside the label in the HTML,
Here is the code below:
HTML
<div class="checkRemember">
<input type="checkbox" class="uniform" name="remember" id="chkRememberMe">
<label for="chkRememberMe">
<span>Remember Me</span>
</label>
</div>
Css
.checkRemember {
display: inline-block;
}
.checkRemember > input[type=checkbox] {
display: none;
}
.checkRemember > input[type="checkbox"] ~ label {
display: inline-block;
cursor: pointer;
line-height: 1;
background: white;
height: 15px;
width: 15px;
border: 1px solid #D9D9D9;
clear: both;
border-radius: 3px;
}
.checkRemember > input[type="checkbox"] ~ label > span {
display:block;
width: 125px;
padding-left: 18px;
}
.checkRemember > input[type="checkbox"]:checked ~ label:before {
content: '\2714';
position: relative;
left: 0.15em;
top: -1pt;
font-size: 9pt;
color: #565656;
clear: both;
}
Problem: Checkbox appears correctly but when i check that checkbox the span inside label moves down, Is there anyway to make that normal when we check that checkbox?
A fiddle to illustrate problem.
Any help is greatly appreciated.
replace
.checkRemember > input[type="checkbox"]:checked ~ label:before {
clear: both;
color: #565656;
content: "✔";
float: left;//add this
font-size: 9pt;
left: 0.15em;
position: relative;
top: 1pt;//change
}
DEMO
Try this.
.checkRemember > input[type="checkbox"]:checked ~ label:before {
content: '\2714';
position: absolute;
left: 1em;
top: 8pt;
font-size: 9pt;
color: #565656;
clear: both;
Just add this to you code
[for=chkRememberMe]{position:relative;}
[for=chkRememberMe] span{position:absolute;}
LIVE DEMO
The porblem is that when the checkbox is not checked it looks like this:
and when it is checked it looks like this :
I am trying to make a custom check box and radio button in pure css with cross browser compatible.
I am lookinga result like mentioned below image:-
I want to this only pure css with ie7
Try This:
DEMO
HTML
<div class="checkbox">
<label class="i-checks">
<input type="checkbox" value=""> <i></i> Option one
</label>
</div>
<div class="radio">
<label class="i-checks">
<input type="radio" checked="" value="option2" name="a"> <i></i> Option two checked
</label>
</div>
CSS
.i-checks {
padding-left: 20px;
cursor: pointer;
}
.i-checks input {
opacity: 0;
position: absolute;
margin-left: -20px;
}
.i-checks input:checked + i {
border-color: #23b7e5;
}
.i-checks input:checked + i:before {
left: 4px;
top: 4px;
width: 10px;
height: 10px;
background-color: #23b7e5;
}
.i-checks input:checked + span .active {
display: inherit;
}
.i-checks input[type="radio"] + i, .i-checks input[type="radio"] + i:before {
border-radius: 50%;
}
.i-checks input[disabled] + i, fieldset[disabled] .i-checks input + i {
border-color: #dee5e7;
}
.i-checks input[disabled] + i:before, fieldset[disabled] .i-checks input + i:before {
background-color: #dee5e7;
}
.i-checks > i {
width: 20px;
height: 20px;
line-height: 1;
border: 1px solid #cfdadd;
background-color: #fff;
margin-left: -20px;
margin-top: -2px;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
position: relative;
}
.i-checks > i:before {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 0px;
height: 0px;
background-color: transparent;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.i-checks > span {
margin-left: -20px;
}
.i-checks > span .active {
display: none;
}
OR - follow the this URL: http://fronteed.com/iCheck/
I have made the css based check box & radio buttons is it near by results ?
http://jsfiddle.net/Vsvg2/78/