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>
Related
I have a customized button/link element that transforms the said element to look like this:
Problem I'm having is that when the button is focused using keyboard the outline is not transformed along the borders of the element. I've also tried using box-shadow, with same results. Is there a proper way to transform outline, like I did with the element itself?
.button {
font-family: $brand-font;
font-weight: 900;
transition: color $transition-duration ease-out;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
text-align: center;
max-width: 320px;
min-width: 200px;
height: 40px;
line-height: 40px;
position: relative;
border: none !important;
font-size: 1.4rem;
z-index: 0;
padding: 0 1.8rem;
background-color: transparent;
color: $primary-blue;
cursor: pointer;
&:visited {
border: none !important;
}
&.skewOnHover {
color: $secondary-blue;
}
& > svg {
vertical-align: middle;
}
&:focus {
outline: 2px solid $primary-blue;
// box-shadow: 0 0 0 2px $primary-blue;
}
&::before {
content: ""; display: block;
display: block;
width: 100%; height: 100%;
top: -2px; left: -2px;
transition-property: border, background-color, transform;
transition-duration: $transition-duration;
transition-timing-function: ease-out;
position: absolute;
z-index: -1;
// regular (cyan background, blue text)
background-color: $secondary-blue;
border: 2px solid $secondary-blue;
transform: skew(-22.5deg);
}
&.skewOnHover {
&::before {
background-color: transparent;
transform: skew(22.5deg);
}
}
Apply the outline to skewed element:
&:focus:before {
outline: 2px solid red;
}
and reset the outline of button:
.button:focus {
outline: none;
}
.button {
font-weight: 900;
transition: color 0.3s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
text-align: center;
max-width: 320px;
min-width: 200px;
height: 40px;
line-height: 40px;
position: relative;
border: none !important;
font-size: 1.4rem;
z-index: 0;
padding: 0 1.8rem;
background-color: transparent;
color: blue;
cursor: pointer;
}
.button:visited {
border: none !important;
}
.button.skewOnHover {
color: dodgerblue;
}
.button>svg {
vertical-align: middle;
}
.button:focus {
outline: none;
}
.button:focus:before {
outline: 2px solid red;
}
.button::before {
content: "";
display: block;
display: block;
width: 100%;
height: 100%;
top: -2px;
left: -2px;
transition-property: border, background-color, transform;
transition-duration: 0.3s;
transition-timing-function: ease-out;
position: absolute;
z-index: -1;
background-color: dodgerblue;
border: 2px solid dodgerblue;
transform: skew(-22.5deg);
}
.button.skewOnHover::before {
background-color: transparent;
transform: skew(22.5deg);
}
<button class="button">button</button>
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;
}
I've coded some toggle switches just using CSS (no JS). When previewing them via the Microsoft Explorer programme they come out as the default checkboxes.
I've applied these styles:
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
to the CSS file, however I've been reading that Microsoft Edge doesn't "play by" the WebKit features.
Is there any way around this at all?
.toggle-switch{
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
width: 4em;
height: 2em;
border-radius: 3em;
background-color: #DED;
transform: backgrond-color 0.09s ease-in-out;
position: relative;
cursor: pointer;
}
.toggle-switch:checked{
background: #0D0155;
cursor: pointer;
}
.toggle-switch::after{
content: "";
width: 2em;
height:2em;
background-color: white;
border-radius: 3em;
position: absolute;
transform: scale(0.5);
left: 0;
transition: left 0.5s ease-in-out;
cursor: pointer;
box-shadow: 0 0.1em rgba(0,0,0,0.5);
}
.toggle-switch:checked::after{
left: 2em;
cursor: pointer;
}
<input type="checkbox" class="toggle-switch" checked>
<input type="checkbox" class="toggle-switch">
What it should look like:
What is previews as:
A possible solution would be to style a label instead of styling the input and hide the input. Indeed, you can use the for attribute on the label to refer to the input, so that when you click on it, it toggles the checkbox. Then you won't have any more problems with checkboxes appearing because your input will be in display: none.
Here is an example:
.checkbox {
display: none;
}
.toggle-switch {
width: 4em;
height: 2em;
border-radius: 3em;
background-color: #DED;
transition: background-color 0.09s ease-in-out;
position: relative;
cursor: pointer;
display: inline-block;
}
.checkbox:checked + .toggle-switch {
background: #0D0155;
cursor: pointer;
}
.toggle-switch::after{
content: "";
width: 2em;
height:2em;
background-color: white;
border-radius: 3em;
position: absolute;
transform: scale(0.5);
left: 0;
transition: left 0.5s ease-in-out;
cursor: pointer;
box-shadow: 0 0.1em rgba(0,0,0,0.5);
}
.checkbox:checked + .toggle-switch::after{
left: 2em;
cursor: pointer;
}
<input type="checkbox" class="checkbox" id="checkbox-id" checked>
<label class="toggle-switch" for="checkbox-id"></label>
Hi guys I've created a toggle button from checkbox. I have a icon from awesome font as a css content. I've been trying almost everything but I'm not albe to align css content string in the middle of the circle.
Here is the css content part:
.onoffswitch-label:before {
content: "\f000";
font-family: FontAwesome;
display: block;
width: 30px;
height: 30px;
margin: 4px 4px 0 0;
background-color: #59B200;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 52px;
border: 2px solid #59B200;
border-radius: 38px;
transition: all 0.3s ease-in 0s;
}
Here is full example
http://jsfiddle.net/vzjyyob4/
Thank you for your help
You can use text-align: center to get the icon centered horizontally, then set line-height to a desired value to get it aligned vertically.
Here is the CSS for the label:
text-align: center;
line-height: 32px;
Here is an updated JSFiddle: http://jsfiddle.net/vzjyyob4/1/
And here is an inline live demo:
.onoffswitch {
position: relative;
width: 94px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
height: 38px;
padding: 0;
line-height: 38px;
border: 2px solid #59B200;
border-radius: 38px;
background-color: #FFFFFF;
transition: all 0.3s ease-in;
}
.onoffswitch-label:before {
content: "\f000";
font-family: FontAwesome;
display: block;
width: 30px;
height: 30px;
margin: 4px 4px 0 0;
background-color: #59B200;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 52px;
border: 2px solid #59B200;
border-radius: 38px;
transition: all 0.3s ease-in 0s;
text-align: center;
line-height: 32px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #59B200;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
border-color: #59B200;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #fff;
background-color: #fff;
color: #59B200;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
Just add this CSS rule to align content:
.onoffswitch-label:before {
text-align: center;
}
try it here
Use either line-height property:
.onoffswitch-label:before {
text-align: center;
line-height: 32px;
}
Or flexbox:
.onoffswitch-label:before {
display: flex;
align-items: center;
justify-content: center;
}
i'm trying to personalize the appearance of Checkbox but this only works in Google Chrome for mozilla doesn't work i dont know how to fix this here is my code:
Example:
Checkbox on jsfiddle.net
¡Please! before you post any response see example in the 2 browsers in
this case Chrome and Mozilla.
images from google chrome and mozilla
Chrome:
Mozilla
CSS:
#div-tallas .seleccion-talla .btn-default{
padding: 6px 7px;
font-weight: 600;
font-size: 1.2em;
letter-spacing: 0px;
min-width: 40px;
margin-left: 1px !important;
}
#div-tallas input[type="checkbox"] {
/* 1 */
display: inline-block;
height: 36px;
width: 36px;
border: 2px solid #000;
-moz-border: 2px solid #000;
/* 2 */
overflow: hidden;
/* 3 */
margin-top: -4px;
vertical-align: middle;
/* 4 */
-webkit-appearance: none;
-moz-appearance: none;
outline: 0;
/* 5 */
background: #e5e4e4;
-moz-background: #e5e4e4;
}
/*
* Checked
*/
#div-tallas input[type=checkbox]:checked {
/* 1 */
display: inline-block;
height: 36px;
width: 36px;
border: 2px solid #e5e4e4 !important;
-moz-border: 2px solid #e5e4e4 !important;
/* 2 */
overflow: hidden;
/* 3 */
margin-top: -4px;
vertical-align: middle;
/* 4 */
-webkit-appearance: none;
-moz-appearance: none;
outline: 0;
/* 5 */
background: #ff6500 !important;
background-color: #ff6500 !important;
padding: 2px;
transition: background 0.4s linear 0s, color 0.4s linear 0s;
}
/* Checkbox */
#div-tallas input[type=checkbox]:checked:before,
#div-tallas input[type=checkbox]:indeterminate:before {
content: "\f00c";
font-family: FontAwesome;
font-size: 32px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 26px;
color: #e5e4e4;
z-index: 888;
margin-left: -1px;
}
#div-tallas input[type=checkbox]:indeterminate:before {
content: "\f068";
}
How about styling the label?
#div-tallas {
background-color: #e5e4e4 !important;
min-height: 40vh;
}
#div-tallas input[type="checkbox"] {
display: none;
}
#div-tallas input[type="checkbox"] + label {
padding-left: 0;
}
#div-tallas input[type="checkbox"] + label:before {
/* 1 */
font: 32px/32px 'FontAwesome';
text-align: center;
display: inline-block;
height: 36px;
width: 36px;
border: 2px solid #000;
overflow: hidden;
margin-top: -4px;
vertical-align: middle;
background: transparent;
/* to show content */
content: "\00a0";
margin-right: 8px;
}
/*
* Checked
*/
#div-tallas input[type=checkbox]:checked + label:before {
border: 2px solid transparent;
background: #ff6500;
transition: background 0.4s linear 0s, color 0.4s linear 0s;
}
/* Checkbox */
#div-tallas input[type=checkbox]:checked + label:before,
#div-tallas input[type=checkbox]:indeterminate + label:before {
content: "\f00c";
color: #e5e4e4;
}
#div-tallas input[type=checkbox]:indeterminate + label:before {
content: "\f068";
}
jsfiddle
This isn't 100% perfect but it does show you a working example of a pure CSS checkbox that works in both Chrome and Firefox.
JSFiddle
HTML
<div id="div-tallas">
<div class="quiero-este">
<h5>¡Quiero este!</h5>
<div class="checkbox check-primary m-top-40 text-center">
<input type="checkbox" value="1" id="checkbox1" />
<label for="checkbox1"></label>
</div>
</div>
</div>
CSS
#div-tallas {
background-color: #e5e4e4 !important;
min-height: 40vh;
}
#div-tallas input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
visibility: hidden;
}
#div-tallas input[type=checkbox],
#div-tallas input[type=checkbox] + label::before {
cursor: pointer;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#div-tallas input[type=checkbox] + label::before {
content: '';
text-align: center;
background: #e5e4e4;
display: inline-block;
pointer-events: none;
opacity: 1;
color: black;
border: 3px solid black;
width: 36px;
height: 36px;
}
#div-tallas input[type=checkbox] + label {
line-height: 20px;
margin: 0 15px 0 15px;
}
#div-tallas input[type=checkbox]:hover {
cursor: pointer;
}
#div-tallas input[type=checkbox]:hover + label::before {
content: '';
background: #e5e4e4;
}
#div-tallas input[type=checkbox]:checked + label::before {
background: #ff6500 !important;
background-color: #ff6500 !important;
outline: 0;
content: "\f00c";
font-family: FontAwesome;
font-size: 32px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 26px;
color: #e5e4e4;
z-index: 888;
margin-left: -1px;
}
#div-tallas input[type=checkbox]:checked:hover + label::before {
opacity: 1;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
Hope this helps.