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>
Related
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
I do some code for checkbox to style it. But checkbox mark doesn't hide as default. I expect, mark should hidden as default and when I click to select it, then there should be show a mark as selected this label. Please help me to solve this problem. Thanks in advance for your help.
.checkbox {
width: 38px;
height: 38px;
margin: 10px;
// border: 1px solid #000;
background: #A53692; /*blue purple*/
}
.label {
position: relative;
width: 645px;
margin: 10px;
padding-left: 20px;
line-height: 38px;
text-align: left;
color: #fff;
background: #A53692; /*blue purple*/
cursor: pointer;
}
.checkbox input[type=checkbox] {
content: "";
width: 38px;
height: 38px;
margin: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
.label label::after {
content: "";
height: 6px;
width: 9px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(-45deg);
position: absolute;
left: -45px;
top: 14px;
cursor: pointer;
}
/*Hide the checkmark by default*/
.checkbox input[type="checkbox"] + .label label::after {
content: none;
}
/*Unhide the checkmark on the checked state*/
.checkbox input[type="checkbox"]:checked + .label label::after {
content: "";
<div class="request-sample-form-items">
<div class="checkbox"><input type="checkbox" id="checkbox"></div>
<div class="label"><label for="checkbox">Select if you want to fill this form automatically next time.</label></div>
</div>
Try this
/* The label-check */
.label-check {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.label-check input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #A53692;
}
/* On mouse-over, add a background color */
.label-check:hover input ~ .checkmark {
background-color: #A53692;
}
/* When the checkbox is checked, add a background */
.label-check input:checked ~ .checkmark {
background-color: #A53692;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.label-check input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.label-check .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<label class="label-check">Checkbox One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
try to remove opacity from the following CSS
.checkbox input[type=checkbox] {
content: "";
width: 38px;
height: 38px;
margin: 0;
left: 0;
opacity: 0; //REMOVE
cursor: pointer;
}
<input type='checkbox' name='chkbox'/>
I want to change the checkbox height and width and also background color if possible
You can look at this piece of code for starters.
It uses the before element to create a custom shape and hide the default checkbox for two states 'checked' and 'unchecked'
Also give a label for that corresponding checkbox so that clicking this custom shape will actually trigger the hidden default checkbox.
body {
font-family: 'segoe ui';
background-color: white;
padding: 10px;
}
.space {
height: 10px;
}
.checkbox * {
box-sizing: border-box;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox {
display: inline-block;
}
.checkbox>input {
display: none;
}
.checkbox>label {
vertical-align: top;
font-size: 18px;
padding-left: 30px;
}
.checkbox>[type="checkbox"]+label:before {
color: #777;
content: '';
position: absolute;
left: 0px;
display: inline-block;
min-height: 20px;
height: 20px;
width: 20px;
border: 2px solid #777;
font-size: 15px;
vertical-align: top;
text-align: center;
transition: all 0.2s ease-in;
content: '';
}
.checkbox.radio-square>[type="checkbox"]+label:before {
border-radius: 0px;
}
.checkbox.radio-rounded>[type="checkbox"]+label:before {
border-radius: 25%;
}
.checkbox.radio-blue>[type="checkbox"]+label:before {
border: 2px solid #ccc;
}
.checkbox>[type="checkbox"]+label:hover:before {
border-color: lightgreen;
}
.checkbox>[type="checkbox"]:checked+label:before {
width: 8px;
height: 16px;
border-top: transparent;
border-left: transparent;
border-color: green;
border-width: 4px;
transform: rotate(45deg);
top: -4px;
left: 4px;
}
<div class="checkbox">
<input id="chkTest" type="checkbox" />
<label for="chkTest">Task one</label>
<div class="space">
</div>
<input id="chkTest1" type="checkbox" />
<label for="chkTest1">Task two</label>
</div>
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>
I've got some radio buttons which I'm formatting to look a little prettier than the standard CSS. When the text associated with the radio button is longer it wraps underneath the radio button and you cannot see some of the text. How do I get the text to wrap and align?
CSS:
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
background-color: #eee;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
width: 200px;
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'✓';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'✓';
text-indent: .9em;
color: #80ffff;
background-color: #0080c0;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
HTML:
<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1">First Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2">Second Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3">Third Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio4" class="radio"/>
<label for="radio4">Fourth Option is longer</label>
</div>
Here is a jsfiddle with my CSS and HTML.
change some css like
label {
border: 1px solid #d1d3d4;
border-radius: 3px;
display: block; /* add this property */
padding-left: 50px; /* add this property */
width: 200px;
}
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
/*text-indent: 3.25em; - remove this property*/
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
https://jsfiddle.net/gb8snazq/4/
Remove text-indent and use padding-left.
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
background-color: #eee;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
width: 200px;
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
padding-left: 3em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'✓';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'✓';
text-indent: .9em;
color: #80ffff;
background-color: #0080c0;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1">First Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2">Second Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3">Third Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio4" class="radio"/>
<label for="radio4">Fourth Option is longer</label>
</div>
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
background-color: #eee;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
width: 145px;
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 9px 0 9px 55px;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
line-height: 2.5em;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'✓';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'✓';
text-indent: .9em;
color: #80ffff;
background-color: #0080c0;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1">First Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2">Second Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3">Third Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio4" class="radio"/>
<label for="radio4">Fourth Option is longer</label>
</div>
Used padding instead of text-indent
line-height added to :before only
https://jsfiddle.net/afelixj/gb8snazq/5/
.input.radio:empty ~ label:before{
content: '✓';
color: #fff;
}
.input.radio:empty ~ label{
text-align:center;
}
<!-- You need to add some css -->
Look like this style