I am trying to get radio button like this..
But I am getting like this
If No option is selected, I need to customize the radio button and it should show white color inside it. If radio button is selected, it should show green color inside the box. How to achieve this?
Here what I tried.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio:checked + label:after {
background: none repeat scroll 0 0 #94E325;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label {
background-color: #e9ecee;
border: 2px solid #adb8c0;
color: #99a1a7;
padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
</style>
</head>
<body>
<div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
</body>
</html>
Just add the :before pseudo element to take care of the color before the radio button is checked. You could add this to your CSS:
.regular-radio + label:before {
background: none repeat scroll 0 0 #FDFDFD;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
Working demo. You can ofcourse change the background of this label to match exactly the example you show. Hope it helps.
You can achieve desired layout in two ways
Via removing standard appearance using CSS appearance and applying custom appearance. Unfortunately this was doesn't work in IE. Demo:
input[type="radio"] {
/* remove standard background appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
.flex {
display: flex;
align-items: center;
}
<div class="flex">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
</div>
<div class="flex">
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
</div>
Via hiding radiobutton and setting custom radiobutton appearance to label's pseudoselector. By the way no need for absolute positioning here. Demo:
*,
*:before,
*:after {
box-sizing: border-box;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label:before {
content: "";
/* create custom radiobutton appearance */
display: inline-block;
width: 25px;
height: 25px;
padding: 6px;
margin-right: 3px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #bbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
background-color: #93e026;
}
/* optional styles, I'm using this for centering radiobuttons */
label {
display: flex;
align-items: center;
}
<input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
input[type=radio].css-checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=radio].css-checkbox + label.css-label {
padding-left: 30px;
height: 25px;
display: inline-block;
line-height: 25px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 25px;
vertical-align: middle;
cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -25px;
}
label.css-label {
background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_98809849d4d88f570f5ad4ce6c2be5b1.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
check out this fiddle.
You should format your radio button both uncheck and checked.
You can find your anwser follow block code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio:checked + label:after {
background: none repeat scroll 0 0 #94E325;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label {
background-color: #e9ecee;
border: 2px solid #adb8c0;
color: #99a1a7;
padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
/*----------------hungtq added--------------*/
.regular-radio + label:before {
background: none repeat scroll 0 0 #e9ecee;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
</style>
</head>
<body>
<div class="button-holder">
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set"><label for="radio-1-set"></label><br>
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-2-set"><label for="radio-2-set"></label><br>
</div>
</body>
</html>
Result:
Related
currently I have encountered a project that needs to change the background color of the input checkbox to black. I searched for some information on the Internet but I still can’t successfully change the color. Would you like to help me find out what went wrong?
input[type=checkbox] {
background-color: #222;
padding: 3px 6px;
border: 1px solid red;
color: #fff;
user-select: none; /* 防止文字被滑鼠選取反白 */
}
input[type=checkbox]:checked:after {
display: inline-block;
content:"";
color: #fff;
background-color:#222;
}
/* input[type=checkbox]:checked:after {
content: "X";
background-color: #FFFFFF;
font-size: 12px;
text-align:center;
} */
<input type="checkbox"><label for="enter-send" class="enter-send"> Enter </label>
You have to write custom CSS to style checkboxes.
/* This css is for normalizing styles. You can skip this. */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.new {
padding: 50px;
}
.form-group {
display: block;
margin-bottom: 15px;
}
.form-group input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.form-group label {
position: relative;
cursor: pointer;
}
.form-group label:before {
content:'';
-webkit-appearance: none;
background-color: transparent;
border: 2px solid black;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 10px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}
.form-group input:checked + label:before {
background: black;
}
.form-group input:checked + label:after {
content: '';
display: block;
position: absolute;
top: 2px;
left: 9px;
width: 6px;
height: 14px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<div class="new">
<form>
<div class="form-group">
<input type="checkbox" id="html">
<label for="html">HTML</label>
</div>
<div class="form-group">
<input type="checkbox" id="css">
<label for="css">CSS</label>
</div>
<div class="form-group">
<input type="checkbox" id="javascript">
<label for="javascript">Javascript</label>
</div>
</form>
</div>
I'm looking a solution how to change css background color with padding or white color around the checkbox, I tried and play around using margin, padding height and etc, but no luck.
So when user click the checkbox, it would show background color, it's working, but I'd like to have white padding around the checkbox, is it possible?
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label:after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
Exactly what you want is background-clip, easy:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label::after {
background-color: #fafafa;
border: 4px solid #0e4caa;
background-clip: content-box;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label::after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
Also on JSFiddle.
The background-clip CSS property sets whether an element's background
extends underneath its border box, padding box, or content box.
Just to mention, there is also one more solution for extra border using outline, but it extends the element:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label::after {
background-color: #fafafa;
border: 4px solid #fafafa;
outline: 4px solid #0e4caa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label::after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
You can use the CSS box-shadow property:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
padding: 5px;
box-shadow: inset 0px 0px 0px 4px white
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
inset shadow should be sufficient for this
box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 0 0 0 2px #0e4caa ,inset 0 0 0 4px white;
Demo
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 0 0 0 2px #0e4caa, inset 0 0 0 4px white;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
outline with a negative offset could also work:
outline: solid white 2px;
outline-offset: -5px;
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
outline: solid white 2px;
outline-offset: -5px;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
I tried to get an input field with an submit-button inside it. Instead of using the "normal" submit button, I tried to insert a small icon into the input-field, but without any success. I wasn't able to get the image (dimensions 30*30 pixels) inside my input-field.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 2px 2px 2px 10px;
}
input[type=submit] {
position: absolute
width: 30px;
height: 30px;
top: 0px;
right: 0px;
/* background-color: #4d7fc3; */
border: none;
color: white;
background-image: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG');
display: block;
background-position: 100px 100px 100px 100px; */
/* background-repeat: no-repeat; */
/* padding: 2px 2px 2px 30px; */
z-index: -1;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
<div id="Search">
<input type="text" name="search" placeholder="Search..">
<input type="submit" value="">
</div>
</form>
</body>
</html>
It should look like this:
There were quite a few errors in the code you pasted up above which weren't doing you any favors.
You left out a ; after the position: absolute; property in your submit input. In order to then have that element positioned properly, you need the parent container to be position: relative;. In this case, the parent container was #Search.
Once that was taken care of there was quite a few properties that could be removed due to being unnecessary. See if my code below helps...
#Search {
position: relative;
display: inline-block;
}
input[type=text] {
position: relative;
width: 200px;
height: 36px;
box-sizing: border-box;
border: 2px solid #4d7fc3;
border-radius: 4px;
font-size: 16px;
background-color: white;
/* 40px padding to account for submit */
padding: 2px 40px 2px 10px;
}
input[type=submit] {
position:absolute;
width: 30px;
height: 100%;
top: 0px;
right: 0px;
border: none;
color: white;
background: url('file:///C|/Users/heilemann/Pictures/LoginPfeil.JPG') #4d7fc3 center center no-repeat;
display: block;
cursor: pointer;
}
Working codepen here.
Just a heads up that your background image for the submit is referencing a local file on your machine, so no one else can actually see it other than you. Be sure to assign it the correct path in relation from the index.html file.
Hope this helps.
Here it is done with HTML and CSS.
/*Clearing Floats*/
.cf:before, .cf:after{
content: "";
display: table;
}
.cf:after{
clear: both;
}
.cf{
zoom: 1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0, 0, 0, .2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* Left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* Remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
<form class="form-wrapper cf">
<input type="text" placeholder="Search..." required>
<button type="submit">Search</button>
</form>
tried both variants, both variants will work, second solution comes clothest
<style>
input[type=checkbox]{display:none}
label{color: black;}
input[type=checkbox]:checked + label{color:red;}
</style>
<label><input type="checkbox">Click</label>
I have a checkbox use label to click, when check box clicked, the label should change the color. What I try to achieve is do it without for="id". I place input inside of label, but the color wont change.
Is any way to do this without id?
It's a bit of a hack but you can use something like this:
With input outside label..
<input type="checkbox"><label>Click</label>
input[type=checkbox] {
display: inline-block;
width: 100%;
position: relative;
z-index: 1;
opacity: 0;
}
label {
position: absolute;
top: 8px;
color: black;
}
input[type=checkbox]:checked + label {
color: red;
}
An example: http://jsfiddle.net/96v7C/
If anyone stumbles over this old question I'd like to pick up Vangel Tzo's answer and optimize it a bit. I would recommend to switch position:absolute; and position:relative; for the label and input fields to allow longer text to wrap properly without overlapping any content below it:
.hidden-checkboxes {
font: 14px 'Open Sans', sans-serif;
}
.hidden-checkboxes input[type=checkbox] {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
z-index: 1;
opacity: 0;
height: 30px;
}
.hidden-checkboxes label {
position: relative;
left: 0;
top: 0;
padding: 5px;
display: inline-block;
width: 100%;
}
.hidden-checkboxes input[type=checkbox]:checked + label {
background: #3298dc;
color: white;
}
.hidden-checkboxes div {
position: relative;
margin-bottom: 1px;
}
<div class="hidden-checkboxes" style="width:300px;">
<div>
<input type="checkbox"><label>Check me please.</label>
</div>
<div>
<input type="checkbox"><label>Or how about me?</label>
</div>
<div>
<input type="checkbox"><label>How about some long text that will cause wrapping of text?</label>
</div>
</div>
Remark: Font and margin-bottom are only used for styling the demo.
Here is a compleat radio butons and checkbox example.
jsFiddle
/*style for iinpul checkbox*/
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background: -moz-linear-gradient(center top, #FFFFFF 20%, #F6F6F6 50%, #EEEEEE 52%, #F4F4F4 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
border: 1px solid #AAAAAA;
border-radius: 5px;
box-shadow: 0 0 3px #FFFFFF inset, 0 1px 1px rgba(0, 0, 0, 0.1);
color: #444444;
display: block;
height: 34px;
line-height: 34px;
overflow: hidden;
position: relative;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
background-color:#e0e0e0;
}
.c-custom-checkbox {
padding-left: 20px;
position: relative;
cursor: pointer;
}
.c-custom-checkbox input[type=checkbox] {
position: absolute;
opacity: 0;
overflow: hidden;
clip: rect(0 0 0 0);
height: 15px;
width: 15px;
padding: 0;
border: 0;
left: 0;
}
.c-custom-checkbox .c-custom-checkbox__img {
display: inline;
position: absolute;
left: 0;
width: 15px;
height: 15px;
background-image: none;
background-color: #fff;
color: #000;
border: 1px solid #333;
border-radius: 3px;
cursor: pointer;
}
.c-custom-checkbox input[type=checkbox]:checked + .c-custom-checkbox__img {
background-position: 0 0;
background-color: tomato;
}
<label class="c-custom-checkbox">
<input type="checkbox" id="valueCheck" />
<i class="c-custom-checkbox__img"></i>Some Label
</label>
I have a container div that has an input type="checkbox" that has pseudo-elements added using ::before and ::after.
function hiding() {
var child = document.getElementById("child");
child.style.visibility = "hidden";
}
var hide = document.getElementById("hide");
hide.addEventListener("click", hiding);
function showing() {
var child = document.getElementById("child");
child.style.visibility = "visible";
}
var show = document.getElementById("show");
show.addEventListener("click", showing);
div {
padding: 10px;
border: 2px solid black;
background-color: green;
}
div div {
position: relative;
top: 50px;
background-color: white;
}
#parent {
height: 150px;
}
#child {
visibility: visible;
}
input[type=checkbox].toggle_switch::after {
content:'';
margin: 0;
padding: 0;
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
border: 1px solid #919191;
border-radius: 3px;
box-shadow: inset 0 1px 0 #f0f0f0;
-webkit-transition: 1s all linear;
}
input[type=checkbox].toggle_switch::before {
content:'OFF';
margin: 0;
padding: 0;
width: 38px;
height: 20px;
position: absolute;
top: 0;
left: 18px;
text-align: center;
border-width: 1px;
border-style: solid;
border-radius: 3px;
font: 700 14px sans-serif;
line-height: 22px;
color: #7f7f7f;
text-shadow: none;
background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;
border-color: #7d7d7d;
}
input[type=checkbox].toggle_switch {
-webkit-appearance: none;
padding: 0;
width: 58px;
height: 22px;
position: relative;
border-radius: 3px 0 0 3px;
-webkit-transition: 1s all linear;
vertical-align: text-top;
}
input[type=checkbox].toggle_switch:checked::after {
left: 36px;
}
input[type=checkbox].toggle_switch:checked::before {
content:'ON';
left: 0px;
color: #fff;
text-shadow: 0 -1px 0 #1b3b6f;
background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
box-shadow: inset 0 2px 2px #2a5bb3, inset -3px 0 3px #2a5bb3;
border-color: #1654b5;
}
<input id="hide" type="button" value="Hide" />
<input id="show" type="button" value="Show" />
<div id="parent">
<div id="child">
<input type="checkbox" class="toggle_switch" />
<input type="checkbox" class="toggle_switch" />
<input type="checkbox" class="toggle_switch" checked/>
<input type="checkbox" class="toggle_switch" />
</div>
</div>
JSFiddle Example Note: written for webkit only at the moment.
The CSS visibility property of the container element is changed from 'visible' to 'hidden' using JavaScript. This only seems to happen when going from 'visible' to 'hidden', not vice versa.
The pseudo-elements remain visible for a moment before disappearing.
Is it possible to prevent the pseudo-elements from lingering when switching the visibility?
PS: you will earn my eternal gratitude if you can tell me how to get this to work IE and Firefox (I know I only have webkit tags in the example but is that all I need to do to fix it?)