I have a common CSS for checkboxes in my application. But I want to get rid of this custom stylish CSS in few places. it should display as a default checkbox, not a customized one.
And i don't want to touch the parent CSS. since we are using a 3rd party framework for styling.
I’ve tried adding the id to 'not' selector in the parent CSS. it worked unfortunately i cannot modify it. I need a alternate approach. Please refer below jsfiddle.
HTML:
<input type="checkbox" href="#" class="menu-open" id="menu-open"/>
<label>Custom Css - ok</label>
<br/>
<input type="checkbox" href="#" class="menu-open" id="menu-open1"/>
<label>Custom Css - ok</label>
<br/>
...<br/>
...
<br/>
<h5>Below checkbox should display as default (without styling)</h5>
<input type="checkbox" href="#" class="menu-open" id="normal"/>
<label>It should be default</label>
CSS
input[type="checkbox"] {
-webkit-appearance: none;
height: 1.618em;
width: 1.618em;
cursor: pointer;
position: relative;
-webkit-transition: .15s;
border-radius: 2em;
background-color: #900;
margin-right: 1em;
margin-top: .53em;
}
input[type="checkbox"]:checked + label{
background-color: green;
}
input[type="checkbox"]:not(:checked) + label{
color: blue;
}
input[type="checkbox"]:before,
input[type="checkbox"]:checked:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 2.818em;
text-align: center;
color: #fff;
content: "'";
font-family: 'WebSymbolsRegular';
font-size: .618em;
}
input[type="checkbox"]:checked:before {
content: '.';
}
input[type="checkbox"]:hover:before {
background: rgba(255, 255, 255, 0.3);
}
http://jsfiddle.net/vh2nothv/2/
Just use class in your css.
http://jsfiddle.net/pratyush141/age91svr/
<input type="checkbox" href="#" class="menu-open" id="menu-open"/>
<label>Custom Css - ok</label>
<br/>
<input type="checkbox" href="#" class="menu-open" id="menu-open1"/>
<label>Custom Css - ok</label>
<br/>
<input type="checkbox" href="#" class="menu-open1" id="menu-open1"/>
<label>Custom Css - ok</label>
<br/>
...<br/>
...
<br/>
CSS
.menu-open {
-webkit-appearance: none;
/* Hides the default checkbox style */
height: 1.618em;
width: 1.618em;
cursor: pointer;
position: relative;
-webkit-transition: .15s;
border-radius: 2em;
background-color: #900;
margin-right: 1em;
margin-top: .53em;
}
.menu-open:checked + label{
background-color: green;
}
.menu-open:not(:checked) + label{
color: blue;
}
.menu-open:before,
input[type="checkbox"]:checked:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 2.818em;
text-align: center;
color: #fff;
content: "'";
font-family: 'WebSymbolsRegular';
font-size: .618em;
}
.menu-open:checked:before {
content: '.';
}
.menu-open:hover:before {
background: rgba(255, 255, 255, 0.3);
}
Related
I'm looking to create a slidedown effect on checkbox check without JS, so pure css. The problem is we can't use JS on this page.
I've look on so many websites, but they all say something different and most do use JS.
My HTML:
<label>
<input class="open-content" type="checkbox">
<div class="label-container">
<div style="color: #EC008C; font-size: 20px; font-weight: 700;">Open this tab</div>
<div style="font-size: 32px; font-weight: 700;">+</div>
</div>
<div class="content-open fade-new">Show this content with slidedown</div>
</label>
My CSS:
<style type="text/css">
.open-content:checked ~ .content-open {
visibility: visible!important; max-height: none!important;
padding: 20px 0px 20px 20px;
margin-top: 30px;
}
.fade-new {
transition: visbility 0.3s ease-in-out, max-height 0.3s ease-in-out;
}
.content-open {
max-height: 0px;
visibility: hidden;
background-color: #F5F5F5;
}
</style>
And how it looks:
But it isn't animated. I used opacity 0 to 1 and that works to make a nice animation, but I prefer sliding down if that is possible with checkbox + pure CSS. Does anyone know how to do this?
Yes, it is possible to create a pure CSS slide-down using the checkbox hack.
In this example I have separated the <label> from the <input> and linked them by:
giving the <input> an id
giving the <label> a matching for attribute
Working Example (Version 1):
This version slides down.
.open-content {
display: none;
}
.label-text {
position: relative;
display: block;
z-index: 12;
height: 32px;
line-height: 32px;
padding: 6px;
color: #EC008C;
font-size: 20px;
font-weight: 700;
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.label-text::after {
content: '+';
display: inline;
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 700;
vertical-align: bottom;
}
.content {
position: relative;
display: inline-block;
z-index: 6;
padding: 6px;
background-color: #F5F5F5;
opacity: 0;
transform: translateY(-50px);
transition: all 0.6s linear;
}
.open-content:checked ~ .content {
opacity: 1;
transform: translateY(0);
}
<input id="open-content" class="open-content" type="checkbox">
<label class="label-text" for="open-content">
Open this tab
</label>
<div class="content">
<p>Show this content with slidedown</p>
</div>
Working Example (Version 2):
This version unfurls.
.open-content {
display: none;
}
.label-text {
position: relative;
display: block;
z-index: 12;
height: 32px;
line-height: 32px;
padding: 6px;
color: #EC008C;
font-size: 20px;
font-weight: 700;
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.label-text::after {
content: '+';
display: inline;
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 700;
vertical-align: bottom;
}
.content {
position: relative;
display: inline-block;
z-index: 6;
padding: 6px;
height: 0;
background-color: #F5F5F5;
opacity: 0;
overflow: hidden;
transition: all 0.6s linear;
}
.open-content:checked ~ .content {
opacity: 1;
height: 120px;
}
<input id="open-content" class="open-content" type="checkbox">
<label class="label-text" for="open-content">
Open this tab
</label>
<div class="content">
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
<p>Show this content with slidedown</p>
</div>
Further Reading:
The "Checkbox Hack" (and things you can do with it) - CSS Tricks
i hope it help you
you also can use css animation
.fade-new{
height:0;
background:red;
opacity:0;
transition:1s;
}
.open-content:checked ~ .fade-new{
height:300px;
opacity:1;
transition:1s;
}
<label>
<input class="open-content" type="checkbox">
<div class="label-container">
<div style="color: #EC008C; font-size: 20px; font-weight: 700;">Open this tab</div>
<div style="font-size: 32px; font-weight: 700;">+</div>
</div>
<div class="content-open fade-new">Show this content with slidedown</div></span>
</label>
<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
<span></span>
<span></span>
</div>
I want to style span when checkbox is checked. I tried below style but its not working.
input:checked ~ div span{
background: red;
}
input:checked~div span {
background: red;
}
<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
<span></span>
<span></span>
</div>
Put some content inside your span, it's working.
input:checked ~ div span{
background: red;
}
<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
<span>Red Text</span>
<span>Red alert</span>
</div>
You are having a div inside a p tag, thats causing the issue, Change your structure and CSS like shown below.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.abc {
position: relative;
text-align: center;
height: 100px;
font: 100px/1em sans-serif;
top: 50vh;
transform: translateY(-50%);
}
input {
visibility: hidden;
}
label {
cursor: pointer;
}
input+label:before {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
height: 100px;
width: 100px;
margin: 0 1em 0 0;
border-radius: 50%;
}
input:checked+label:before {
border: none;
background: #fff;
color: #333;
content: "\2713";
text-align: center;
}
input:checked+label:after {
font-weight: bold;
}
input:focus+label::before {
outline: rgb(59, 153, 252) auto 5px;
}
.def {
width: 100px;
height: 100px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-140%, -50%);
z-index: -1;
}
span {
background: green;
width: 20px;
height: 20px;
top: 50%;
left: 55%;
transform: translate(-50%, -55%);
position: absolute;
border-radius: 50%;
}
span:nth-child(1) {
left: 120%;
/* background:green; */
}
span:nth-child(2) {
top: 115%;
/* background:red; */
}
span:nth-child(3) {
left: -10%;
/* background:blue; */
}
span:nth-child(4) {
top: -10%;
/* background:yellow; */
}
/* styles for span when checkbox is checked */
input:checked~div span {
background: red;
}
<div class="abc">
<input type="checkbox" id="c1" />
<label for="c1">c1</label>
<div class="def">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
A span doesn't have anything inside, and takes up no space, by default. Your code works for me if I add text inside the span.
This is my code to toggle an element
<label style="float:right" class="toggle toggle-assertive">
<input type="checkbox" ng-model="checkModel">
<div class="track">
<div class="handle"></div>
</div>
</label>
This is the output of the above code
When the checkbox is toggled, the background element changes to red as shown
Now I want the background to change to blue when toggled so I have this code
#trackBack {
background-color:#0000FF;
border:0;
}
On applying the above css code the background changes to blue whether toggled or not. Shown in the below picture
My challenge now is how can I make the background blue only when toggled.
Kindly assist
You can do following way.
Working Fiddle
.onoffswitch {
position: relative; width: 60px;
-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: 36px; padding: 0; line-height: 36px;
border: 2px solid #CCCCCC; border-radius: 36px;
background-color: #FFFFFF;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "";
display: block; width: 36px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 22px;
border: 2px solid #CCCCCC; border-radius: 36px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #0000FF;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #0000FF;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
Reference link
When you're using Jquery than you can use the toggleClass function. This changes the class of the html item that is selected.
This is the code of the Jquery:
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
And here the code of the HTML:
<body>
<button>Toggle class "main" for p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><b>Note:</b> Click the button more than once to see the toggle effect.</p>
</body>
And CSS:
.main {
font-size: 120%;
color: red;
}
Here is a JSfiddle to play with:
JSFiddle
How can I use custom radio buttons and checkboxes in ZURB Foundation 5? It seems like it was easy in ZURB Foundation 4, but can't get the custom radio and checkbox to work.
I don't know what have you been using before but it can be simply done by custom CSS code without JavaScript like this:
SCSS
input {
&[type=checkbox], &[type=radio] {
opacity: 0;
position: absolute;
&:checked + label:before {
background: $primary-color;
}
& + label:before {
display: inline-block;
text-align: center;
line-height: 1;
border: 0.0625rem solid $primary-color;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
font-size: 0.875rem;
color: white;
background: white;
}
}
&[type=checkbox] {
& + label:before {
content: "\2715";
padding-right: 1px;
border-radius: 0.125rem;
}
}
&[type=radio] {
& + label:before {
content: "\2713";
border-radius: 50%;
}
}
}
If you don't want to have any character inside checboxes or radio buttons then put whitespace into content attribute:
[...]
content: " ";
[...]
CodePen playground
Compiled CSS + HTML to show working example
input[type=checkbox],
input[type=radio] {
opacity: 0;
position: absolute;
}
input[type=checkbox]:checked + label:before,
input[type=radio]:checked + label:before {
background: #007095;
}
input[type=checkbox] + label:before,
input[type=radio] + label:before {
display: inline-block;
text-align: center;
line-height: 1;
border: 0.0625rem solid #007095;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
font-size: 0.875rem;
color: white;
background: white;
}
input[type=checkbox] + label:before {
content: "\2715";
padding-right: 1px;
border-radius: 0.125rem;
}
input[type=radio] + label:before {
content: "\2713";
border-radius: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="small-12 column">
<h3>Radio Button</h3>
<div class="inline">
<input type="radio" name="role" value="admin" id="admin" checked />
<label for="admin">admin</label>
</div>
<div class="inline">
<input type="radio" name="role" value="user" id="user" />
<label for="user">user</label>
</div>
</div>
<div class="small-12 column" style="margin-top: 10px;">
<h3>Checkbox</h3>
<input type="checkbox" id="captcha" checked/>
<label for="captcha" translate>I am human</label>
</div>
</div>
Please add this because it conflicts with the "switch"
input {
...
&.switch-input {
& + label:before {
display: none;
}
}
}
I've customized this radio button and have trouble focusing the pointer inside the radio button .
<div class="radio">
<input id="left" type="radio" name="gender" value="left">
<label for="left">Left</label>
<input id="right" type="radio" name="gender" value="right">
<label for="right">Right</label>
</div>
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #ffffff;
border: 3px solid;
border-color: #bababa;
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #373c3e;
font-size: 60px;
text-align: center;
line-height: 16px;
}
Deputy example so that you can see the error.
Visit https://jsfiddle.net/drag/rbhzpvn3/1/
you can set just background color instead of > content: "\2022".
it means :
input[type=radio]:checked + label:before {
background-color: #373c3e;
}