I made a custom checkbox with css. For the checked icon i use Google's material icons. Now the only problem is that the icon is not vertically centered. How do I do that?
HTML:
<input type="checkbox" id="remember">
<label for="remember">Angemeldet bleiben</label>
CSS:
/* Basic Styling
----------------------------------------------------------------------------------------------------*/
input[type="radio"],
input[type="checkbox"] {
display: none;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
margin-right: 20px;
padding-left: 30px;
cursor: pointer;
display: inline-block;
position: relative;
}
input[type="radio"] + label:before,
input[type="checkbox"] + label:before,
input[type="radio"] + label:after,
input[type="checkbox"] + label:after {
width: 20px;
height: 20px;
content: '';
top: 0;
left: 0;
color: #fafafa;
text-align: center;
position: absolute;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* Radios
----------------------------------------------------------------------------------------------------*/
input[type="radio"] + label:before {
border: 1px solid #eee;
border-radius: 50%;
box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #fafafa;
}
input[type="radio"] + label:hover:before {
border: 1px solid #eee;
border-radius: 50%;
box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #eee;
}
input[type="radio"]:checked + label:before {
border: 1px solid #2196F3;
border-radius: 50%;
box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #2196F3;
}
/* Checkboxes
----------------------------------------------------------------------------------------------------*/
input[type="checkbox"] + label:before {
font-family: 'Material Icons';
font-size: 18px;
content: '\E876';
border: 1px solid #eee;
border-radius: 2px;
background: #fafafa;
}
input[type="checkbox"] + label:hover:before {
color: #eee;
}
input[type="checkbox"]:checked + label:before {
color: #2196F3;
}
Here is what it looks like:
There are few ways to do that, but in my opinion, the best solution is with CSS vertical-align Property.
Required reading on THIS link.
Use line-height property.
input[type="radio"] + label:before,
input[type="checkbox"] + label:before,
input[type="radio"] + label:after,
input[type="checkbox"] + label:after {line-height: 19px;}
Demo:http://jsfiddle.net/k3zLj0w4/
Related
So I got this CSS Custom Checkbox but transitions doesn't seem to work on it. I didn't make the code tho, I got it from here.
Here is my slightly modified version:
.checkbox {
position: absolute;
opacity: 0;
}
.checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
}
.checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: #ccf2ff;
border-radius: 6px;
box-shadow: 0 0 0 3px #99e6ff;
}
.checkbox:hover + label:before {
background: #80dfff;
}
.checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.checkbox:checked + label:before {
background: #33ccff;
}
.checkbox:disabled + label {
cursor: auto;
}
.checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 9px;
background: white;
width: 2px;
height: 2px;
box-shadow:
2px 0 0 white,
4px 0 0 white,
4px -2px 0 white,
4px -4px 0 white,
4px -6px 0 white,
4px -8px 0 white;
transform: rotate(45deg);
}
.checkbox, .button, input, select
{
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
Every other transition works fine, it's just the checkbox thats the problem. Am I missing something here? Or is there something wrong with the code that's making transitions not work? Please help me.
You are applying your custom checkbox style to the :before pseudo element of the label tag so you just need to apply the transition to that also:
.checkbox,
.button,
input,
select,
.checkbox + label:before
{
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
I'm trying to get a css menu working but want to use vuejs/nuxt-link instead of a traditional a href as this is a single page application Im trying to learn how to build
I have the following
How do I convert this to work with nuxt-link instead of a href
Thanks
HTML I currently have
<nav class="radial">
<input type="checkbox" id="menu" checked>
About
Resume
Blog
Github
a
<label for="menu" class='fa-bars'>Menu</label>
</nav>
I'd like to use (for example) in my html, assuming this is possible.
<nuxt-link :to="'/about'"><fa icon="bars" /></nuxt-link>
The css I currently have is as follows
nav.radial {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
top: -2.5rem;
width: 3rem;
height: 3rem;
margin: 0 100px;
}
nav.radial input {
display: none;
}
nav.radial > label,
nav.radial > a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #21618C;
color: white;
text-align: center;
font-size: 0;
line-height: 3rem;
}
nav.radial label:before,
nav.radial a:before {
font-size: 1.2rem;
color: white;
}
nav.radial a {
color: transparent;
text-decoration: none;
box-sizing: border-box;
}
nav.radial label {
border-radius: 0 0 1.5rem 1.5rem;
cursor: pointer;
box-sizing: border-box;
border-bottom: 0.25rem solid #2f2f2f;
box-shadow: 0 0.1875rem rgba(0, 0, 0, 0.25);
transition: border-bottom 0.25s, box-shadow 0.5s;
}
nav.radial input:checked ~ label {
border-bottom-width: 1px;
box-shadow: none;
}
nav.radial a[href] {
transition: top 0.1s, left 0.25s, opacity 1s, box-shadow 0.25s;
border-radius: 1.5rem;
opacity: 0;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid #888;
box-sizing: border-box;
}
nav.radial a[href]:hover {
background-color: #E6EDF2;
border-bottom-color: #2c7768;
}
nav.radial input:checked ~ a[href] {
transition: top 1s, left 0.6s, box-shadow 1s, background-color 0.25s, border-bottom-color 0.25s, border-bottom-width 0.25s;
opacity: 1;
}
nav.radial a[href]:hover {
border-bottom-width: 0.25rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(1),
nav.radial input:checked ~ a[href]:nth-of-type(5) {
box-shadow: 0 -0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
}
nav.radial input:checked ~ a[href]:nth-of-type(1) {
left: -4.72707721rem;
top: 0.83351125rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(2) {
left: -3.08538053rem;
top: 3.67701333rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(3) {
left: 0rem;
top: 4.8rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(4) {
left: 3.08538053rem;
top: 3.67701333rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(5) {
left: 4.72707721rem;
top: 0.83351125rem;
}
many thanks for any assistance in advance
This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 7 months ago.
How do you style checkbox using only CSS? I want checkboxes with a background color of my choice, and appear a cross mark when they are checked, instead of a checkmark.
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 1.95em;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0; top: 0;
width: 1.25em; height: 1.25em;
border: 2px solid #ccc;
background: #fff;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: .1em; left: .3em;
font-size: 1.3em;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
border: 2px dotted blue;
}
/* hover style just for information */
label:hover:before {
border: 2px solid #4778d9!important;
}
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #777;
}
h1, h2 {
margin-bottom: .25em;
font-weight: normal;
text-align: center;
}
h2 {
margin: .25em 0 2em;
color: #aaa;
}
form {
width: 7em;
margin: 0 auto;
}
.txtcenter {
margin-top: 4em;
font-size: .9em;
text-align: center;
color: #aaa;
}
.copy {
margin-top: 2em;
}
.copy a {
text-decoration: none;
color: #4778d9;
}
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">India</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">USA</label>
</p>
<p>
<input type="checkbox" id="test3" checked="checked" />
<label for="test3">Japan</label>
</p>
</form>
<div class="checkbox">
<input name="filter_price0" id="offer_407" type="checkbox" value="407" hidden >
<label for="offer_407">
Below 500 Rs
</label>
</div>
<style>
.checkbox input[type="checkbox"]:checked + label:before {
background-color: #424242;
border-color: #424242;
content: "\2713";
display: inline-block;
text-align: center;
color:#fff;
}
li{
list-style-type:none;
margin-top:10px;
}
.checkbox label{
cursor:pointer;
}
.checkbox label:before {
content: "";
cursor:pointer;
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
left: 0;
border: 1px solid #cccccc;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
</style>
for demo you can click here fiddle demo, and next time post some code which you tryed
Had the same question - found a nice solution - check out answers in Stackoverflow - no one has this one nice trick.
Here it is
input[type=checkbox].agb {
all: unset;
/* rest of styles here */
}
It sets all Browser generated css styles to none and you are able to style the checkbox from scratch like you want to have it without any label hacks or something.
Cool?
I'll give you an example of a simple custom checkbox of mine.
input[type=checkbox].agb {
all: unset;
width: 32px;
height: 32px;
margin-right: 5px;
display: block;
background: var(--color-2);
float: left;
}
input[type=checkbox].agb:checked {
background: var(--color-4);
color: var(--color-2)
}
input[type=checkbox].agb:checked::after {
content: "✔";
display: block;
font-size: 26px;
padding-left: 5px;
}
I styled up this checkbox to look like a switch. I would like to put the words "ON" and "OFF" inside of it. That's what I'm having trouble with.
Here is the codepen: http://codepen.io/anon/pen/BKMErO
CSS:
.switch-field {
display: table-cell;
vertical-align: middle;
}
input.switch {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.switch + label, input.switch + label:before, input.switch + label:after {
-webkit-border-radius: 2.4em;
-moz-border-radius: 2.4em;
-ms-border-radius: 2.4em;
-o-border-radius: 2.4em;
border-radius: 2.4em;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
width: 4.8em;
height: 2.4em;
overflow: hidden;
}
input.switch + label:before, input.switch + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
content: "";
}
input.switch + label:before {
background-color: #bbb;
right: 0;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
input.switch + label:after {
background-color: #fff;
width: 2.4em;
width: calc(2.4em - 2px);
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-webkit-transition: margin 0.3s;
-moz-transition: margin 0.3s;
-o-transition: margin 0.3s;
transition: margin 0.3s;
}
input.switch:checked + label:before {
background-color: green;
}
input.switch:checked + label:after {
margin-left: 2.5em;
}
HTML:
<div class="switch-field">
<input id="cmn-toggle-1" class="switch" type="checkbox">
<label for="cmn-toggle-1"></label>
</div><!-- /.switch-field -->
Give this a try
http://codepen.io/Atula/pen/ZWwdmm?editors=0100
css
content: 'ON';
padding: 10px 0;
text-align:center;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.switch-field {
display: table-cell;
vertical-align: middle;
}
input.switch {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.switch + label, input.switch + label:before, input.switch + label:after {
-webkit-border-radius: 2.4em;
-moz-border-radius: 2.4em;
-ms-border-radius: 2.4em;
-o-border-radius: 2.4em;
border-radius: 2.4em;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
width: 4.8em;
height: 2.4em;
overflow: hidden;
}
input.switch + label:before, input.switch + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
content: "";
}
input.switch + label:before {
background-color: #bbb;
right: 0;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
input.switch + label:after {
background-color: #fff;
width: 2.4em;
width: calc(2.4em - 2px);
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-webkit-transition: margin 0.3s;
-moz-transition: margin 0.3s;
-o-transition: margin 0.3s;
transition: margin 0.3s;
}
input.switch:checked + label:before {
background-color: green;
content :'ON';
text-align :left;
color:#fff;
padding:5px
}
input.switch:checked + label:after {
margin-left: 2.5em;
text-align :right;
}
</style>
</head>
<body>
<div class="switch-field">
<input id="cmn-toggle-1" class="switch" type="checkbox">
<label for="cmn-toggle-1"></label>
</div><!-- /.switch-field -->
</body>
</html>
I am having a problem over-riding the bootstrap css for checkboxes and input checkboxes. I have a checkboxlist and the bootstraps styling is over-riding my own css file. I have doubled checked and made sure that it wasn't bootstraps themes causing the issue but it is the bootstraps css.
I have also tried using !important
in my css and it still gets over-ridden, I even placed my css file after the bootstraps css, tried putting my css before it, even tried
input[type=checkbox]
and that did nothing as well.
Here is the css I'm trying to use to override the bootstrap
.CheckBoxSubjects td {
border-style: solid;
border: 1px solid #78E389;
width: 122px;
height: 27px;
border-radius: 5px;
background-color:#78E389;
}
Here's the fiddle of the code I used. Hope this helps for you.
http://jsfiddle.net/cLaty/
HTML
<div class="checkbox pull-right">
<input type="checkbox" id="remember" /><label for="remember">Remember me</label>
</div>
CSS
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
input[type="checkbox"]:not(:checked) + label:before,
input[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: 0; left: 4px;
font-size: 14px;
color: #4cc0c1;
transition: all .2s;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
}
/* checked mark aspect changes */
input[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
input[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
input[type="checkbox"]:disabled:not(:checked) + label:before,
input[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #999999;
background-color: #ddd;
}
input[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
input[type="checkbox"]:disabled + label {
color: #aaa;
}
/* accessibility */
input[type="checkbox"]:checked:focus + label:before,
input[type="checkbox"]:not(:checked):focus + label:before {
border: inherit;
}