When I'm working on a checkbox, I have it styled the way I need it to be, but the label beside it keeps moving. When unchecked it aligns itself with the bottom of the box, but then when checked it moves to center align it to the box.
.check {
width: 100%;
font-weight: normal;
margin-bottom: 0px;
}
.check label {
content: " ";
width: 18px;
height: 18px;
border: 1px solid #dae2e6;
margin-right: 10px;
display: inline-block;
}
.check label::after {
font-size: 13px;
color: #8e989f;
}
.check input[type="checkbox"]:checked + label::after {
font-family: "Material Icons";
content: "\e5ca";
}
.check input[type="checkbox"] {
left: -9999px;
position: absolute;
}
.check input[type="checkbox"]:checked + label + div {
display: inline-block;
}
<label class="check">
<input type="checkbox" value="mandatory" name="checkbox1" id="check3">
<label for="check3"> </label>
Mark as Mandatory
</label>
Fiddle
.check {
width: 100%;
font-weight: normal;
margin-bottom: 0px;
}
.check label {
content: " ";
width: 18px;
height: 18px;
border: 1px solid #dae2e6;
margin-right: 10px;
display: inline-block;
float: left; /*MODIFICATION */
}
.check label::after {
font-size: 13px;
color: #8e989f;
}
.check input[type="checkbox"]:checked + label::after {
font-family: "Material Icons";
content: "\e5ca";
}
.check input[type="checkbox"] {
left: -9999px;
position: absolute;
}
.check input[type="checkbox"]:checked + label + div {
display: inline-block;
}
<label class="check">
<input type="checkbox" value="mandatory" name="checkbox1" id="check3">
<label for="check3"> </label>
Mark as Mandatory
</label>
Just add this float:left property.
.check label {
content: " ";
width: 18px;
height: 18px;
border: 1px solid #dae2e6;
margin-right: 10px;
display: inline-block;
float: left; /*MODIFICATION*/
}
Working fiddle
Related
I want to add a fa-window-close style to my
In other words I want to have the window close (X) instead of the checked simbol, when I click the input.
I only want to use html.
How would the syntax look like?
You can try this :
.checkbox-custom, .radio-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
background: rebeccapurple;
color: #fff;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
color: #bbb;
}
.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
outline: 1px solid #ddd; /* focus style */
}
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/6fac2730d4.js"></script>
<form>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
</form>
I have CSS3 styled checkboxes using fontAwesome. The one little formatting problem I'm running into is the text wrap goes underneath the checkbox. Here is the code and fiddle:
CSS:
#import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);
.wrapper {
width:300px;
}
input[type=checkbox].with-font {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
input[type=checkbox].with-font ~ label:before {
font-family: FontAwesome;
display: inline-block;
content: "\f1db";
letter-spacing: 10px;
font-size: 1.2em;
color: #535353;
width: 1.4em;
}
input[type=checkbox].with-font:checked ~ label:before {
content: "\f00c";
font-size: 1.2em;
color: darkgreen;
letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {
content: "\f096";
}
input[type=checkbox].with-font:checked ~ label:before {
content: "\f046";
color: darkgreen;
}
HTML:
<div class="wrapper">
<input id="box1" type="checkbox" class="with-font" />
<label for="box1">This is very long text that will wrap underneath the checkbox. Not sure how to flush it properly.</label>
</div>
JS Fiddle
Ideally I would like to indent and justify the text, like this:
I have tried a few methods, such as wrapping in a table and left-floating divs, but it seems to break the CSS when I try to separate the label from the checkbox. Any direction is much appreciated!
Like that? ;)
HTML:
<div class="wrapper">
<input id="box1" type="checkbox" class="with-font" />
<label for="box1">
<span class=text>
This is very long text that will wrap underneath the checkbox. Not sure how to flush it properly.
</span>
</label>
</div>
CSS:
#import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);
.wrapper {
width: 300px;
text-align: justify;
text-justify: inter-word;
}
input[type=checkbox].with-font {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
input[type=checkbox].with-font ~ label:before {
font-family: FontAwesome;
display: inline-block;
content: "\f1db";
letter-spacing: 10px;
font-size: 1.2em;
color: #535353;
width: 1.4em;
}
input[type=checkbox].with-font:checked ~ label:before {
content: "\f00c";
font-size: 1.2em;
color: darkgreen;
letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {
content: "\f096";
}
input[type=checkbox].with-font:checked ~ label:before {
content: "\f046";
color: darkgreen;
}
.text {
margin-left: 10px;
position: absolute;
width: 250px;
}
https://jsfiddle.net/0vpcwo53/
Changelog:
In html This is very... is now surrounded by <span class=text></span>
In css changes in .wrapper
In css added .text
And that's all.
How i can make a css ckeckbox+lebel without id and for .
I use this way but it dosnt work.i can have a css ckeckbox whit id and for like this :
<div class="checkbox">
<input id="f" type="checkbox" name="hi" class="checkbox" />
<label for="f">Hello</label>
</div>
But i wanna to have this :
<label class="checkbox">
<input type="checkbox" value="1" name="files" >
</label>
Then i use This CSS (SCSS in fact):
label{
input[type=checkbox]{
display: none;
}
}
.checkbox{
position: relative;
display: inline-block;
margin-right: 7px;
cursor: pointer;
vertical-align: middle;
&:after{
content: ' ';
position: absolute;
border: 2px solid $black;
border-radius: 3px;
width: 20px;
height: 20px;
top: -5px;
left: -2px;
width: 14px;
height: 14px;
}
&:checked{
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
}
/* It dosnt work */
.checkbox:after > input[type=checkbox]:checked {
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
But Checked check box dost show ?
Please help :)
You must use span in your Label tag.
.checkbox:after > input[type=checkbox]:checked
This line not make sense because its need to be the opposite. So I'm change it to this:
input[type=checkbox]:checked ~ .checkbox:after
When you check ~ do something with the next element.
So, i add a span to complete your problem. Here we go:
Working Fiddle
$blue : blue;
$black : black;
label{
input[type=checkbox]{
opacity: 0;
}
}
.checkbox{
position: relative;
display: inline-block;
margin-right: 7px;
cursor: pointer;
vertical-align: middle;
&:after{
content: ' ';
position: absolute;
border: 2px solid $black;
border-radius: 3px;
width: 20px;
height: 20px;
top: -5px;
left: -2px;
width: 14px;
height: 14px;
}
&:checked{
font-family: 'FontAwesome';
font-size: 2em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
}
/* It dosnt work */
input[type=checkbox]:checked ~ .checkbox:after{
font-family: 'FontAwesome';
font-size: 1em;
content: "\f00c";
color: $blue;
border-radius: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<label>
<input type="checkbox" value="1" name="files" >
<span class="checkbox"></span>
</label>
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/