I am trying to create a web-based rating scale with seven checkboxes, two text labels and a horizontal rule in the background. It should look similar to a paper-based rating scale. In addition, I would like to mark the middle checkbox by a short vertical rule.
Because checkboxes seem to be quite difficult to style, I replaced them by a text symbol and a border in the labels. I manually positioned these checkboxes and the vertical rule on the horizontal rule. The result looks ok in Firefox but it doesn't seem to work for other browsers. In Chrome, IE and Edge, the vertical line is not placed in the center of the scale. Additionally, the checkbox symbol is not centered in Chrome.
Is there a better way to do this?
https://jsfiddle.net/tzuyya36/1/
input[type="radio"] {
display: none;
}
input[type="radio"]+label:before {
font: 12px/16px sans-serif;
text-align: center;
vertical-align: middle;
content: "\00a0";
width: 16px;
height: 16px;
margin: 0;
padding: 0;
position: absolute;
border: 2px solid #8b8d8e;
background: #ffffff;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
display: inline-block;
}
input[type="radio"]:checked+label:before {
content: "\26ab";
}
label.scale1 {
cursor: pointer;
margin: 0;
position: absolute;
left: -8px;
}
label.scale2 {
cursor: pointer;
margin: 0;
position: absolute;
left: 82px;
}
label.scale3 {
cursor: pointer;
margin: 0;
position: absolute;
left: 172px;
}
label.scale4 {
cursor: pointer;
margin: 0;
position: absolute;
left: 262px;
}
label.scale5 {
cursor: pointer;
margin: 0;
position: absolute;
left: 352px;
}
label.scale6 {
cursor: pointer;
margin: 0;
position: absolute;
left: 442px;
}
label.scale7 {
cursor: pointer;
margin: 0;
position: absolute;
left: 532px;
}
div.scale {
margin: 20px auto;
width: 540px;
height: 16px;
position: relative;
}
div.leftLabel {
text-align: right;
width: 100px;
position: absolute;
left: -120px;
}
div.rightLabel {
text-align: left;
width: 100px;
position: absolute;
left: 560px;
}
hr.horizontal {
width: 100%;
position: absolute;
border: 2px solid #8b8d8e;
}
hr.vertical {
width: 30px;
position: absolute;
left: 257px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
border: 2px solid #8b8d8e;
}
<form>
<div class="scale">
<hr class="horizontal">
<hr class="vertical">
<div class="leftLabel">low</div>
<input type="radio" name="test" id="test1" value="1"><label for="test1" class="scale1"></label>
<input type="radio" name="test" id="test2" value="2"><label for="test2" class="scale2"></label>
<input type="radio" name="test" id="test3" value="3"><label for="test3" class="scale3"></label>
<input type="radio" name="test" id="test4" value="4"><label for="test4" class="scale4"></label>
<input type="radio" name="test" id="test5" value="5"><label for="test5" class="scale5"></label>
<input type="radio" name="test" id="test6" value="6"><label for="test6" class="scale6"></label>
<input type="radio" name="test" id="test7" value="7"><label for="test7" class="scale7"></label>
<div class="rightLabel">high</div>
</div>
</form>
Instead of trying to use a symbol which may change in appearance depending on operating system, font etc. I would use another pseudo element. This way you have complete control over the appearance.
To centre the vertical line you would use left: 50%, this way the width of parent is irrelevant, and margin-left: -15px, half the width of the element.
input[type="radio"] {
display: none;
}
input[type="radio"]+label:before {
font: 12px/16px sans-serif;
text-align: center;
vertical-align: middle;
content: "\00a0";
width: 16px;
height: 16px;
margin: 0;
padding: 0;
position: absolute;
border: 2px solid #8b8d8e;
background: #ffffff;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
display: inline-block;
}
input[type="radio"]:checked+label:after {
content: "";
width: 12px;
height: 12px;
margin: 4px;
position: absolute;
background: #FF0000;
border-radius: 50%;
}
label.scale1 {
cursor: pointer;
margin: 0;
position: absolute;
left: -8px;
}
label.scale2 {
cursor: pointer;
margin: 0;
position: absolute;
left: 82px;
}
label.scale3 {
cursor: pointer;
margin: 0;
position: absolute;
left: 172px;
}
label.scale4 {
cursor: pointer;
margin: 0;
position: absolute;
left: 262px;
}
label.scale5 {
cursor: pointer;
margin: 0;
position: absolute;
left: 352px;
}
label.scale6 {
cursor: pointer;
margin: 0;
position: absolute;
left: 442px;
}
label.scale7 {
cursor: pointer;
margin: 0;
position: absolute;
left: 532px;
}
div.scale {
margin: 20px auto;
width: 540px;
height: 16px;
position: relative;
}
div.leftLabel {
text-align: right;
width: 100px;
position: absolute;
left: -120px;
}
div.rightLabel {
text-align: left;
width: 100px;
position: absolute;
left: 560px;
}
hr.horizontal {
width: 100%;
position: absolute;
border: 2px solid #8b8d8e;
}
hr.vertical {
height: 30px;
position: absolute;
top: -15px;
left: 50%;
border: 2px solid #8b8d8e;
}
<form>
<div class="scale">
<hr class="horizontal">
<hr class="vertical">
<div class="leftLabel">low</div>
<input type="radio" name="test" id="test1" value="1"><label for="test1" class="scale1"></label>
<input type="radio" name="test" id="test2" value="2"><label for="test2" class="scale2"></label>
<input type="radio" name="test" id="test3" value="3"><label for="test3" class="scale3"></label>
<input type="radio" name="test" id="test4" value="4"><label for="test4" class="scale4"></label>
<input type="radio" name="test" id="test5" value="5"><label for="test5" class="scale5"></label>
<input type="radio" name="test" id="test6" value="6"><label for="test6" class="scale6"></label>
<input type="radio" name="test" id="test7" value="7"><label for="test7" class="scale7"></label>
<div class="rightLabel">high</div>
</div>
</form>
because I like flex, box shadows & gradients.
This way you can add as many inputs you want and the layout will adapt.
form {
display: flex;
}
form > div {
margin: 0 10px;
padding: 10px 0;
}
.scale {
width: 100%;
display: flex;
/* Centering the labels */
justify-content: space-between;
/* Adding the background gray line */
background:linear-gradient(transparent 45%, gray 45%, gray 55%, transparent 55%);
position: relative;
}
/* vertical rule */
.scale::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 4px;
left: 50%;
margin-left: -2px;
background: gray;
z-index: -1;
}
input {
display:none;
}
/* Direct styling of the labels as UTF8 icons can be inconsistent across browsers */
label{
display:block;
width:20px;
height: 20px;
background-color: white;
border: 2px solid gray;
border-radius: 100%;
}
input:checked+label {
/* Inset box-shadows can be used to create additional borders */
box-shadow: inset 0 0 0 2px white;
background-color: gray;
}
<form>
<div>low</div>
<div class="scale">
<input type="radio" name="test" id="test1"><label for="test1"></label>
<input type="radio" name="test" id="test2" checked><label for="test2"></label>
<input type="radio" name="test" id="test3"><label for="test3"></label>
<input type="radio" name="test" id="test4"><label for="test4"></label>
<input type="radio" name="test" id="test5"><label for="test5"></label>
</div>
<div>high</div>
</form>
Don't use hard-coded pixel values, use % here as they are uniformly distributed.
Make 3 divisions. Left label, right label and middle scale. Middle scale is the main focus and left right labels can be done separately.
.scaleContainer {
position: relative;
width: 100%;
}
div.horizontal {
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 3px;
background-color: gray;
position: absolute;
}
div.vertical {
width: 2px;
height: 20px;
background-color: gray;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="radio"] {
margin: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
input[type="radio"]:nth-of-type(1) {
left: calc(100% * 0 / 6)
}
input[type="radio"]:nth-of-type(2) {
left: calc(100% * 1 / 6)
}
input[type="radio"]:nth-of-type(3) {
left: calc(100% * 2 / 6)
}
input[type="radio"]:nth-of-type(4) {
left: calc(100% * 3 / 6)
}
input[type="radio"]:nth-of-type(5) {
left: calc(100% * 4 / 6)
}
input[type="radio"]:nth-of-type(6) {
left: calc(100% * 5 / 6)
}
input[type="radio"]:nth-of-type(7) {
left: calc(100% * 6 / 6)
}
.scale>div {
display: table-cell;
}
.scale>div:first-child,
.scale>div:last-child {
padding: 10px;
}
<form>
<div class="scale">
<div class="leftLabel">low</div>
<div class="scaleContainer">
<div class="horizontal"></div>
<div class="vertical"></div>
<input type="radio" value="1">
<input type="radio" value="2">
<input type="radio" value="3">
<input type="radio" value="4">
<input type="radio" value="5">
<input type="radio" value="6">
<input type="radio" value="7">
</div>
<div class="rightLabel">high</div>
</div>
</form>
I found a similar question to mine here but the accepted answer did not fix my issue.
Bring element to front using CSS
I have made custom check boxes and I am trying to bring them to the front. Here is my html:
<!DOCTYPE HTML>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script src="javascript.js"></script>
</head>
<body>
<div id="Title">
<img src="" alt="WifiFinder.img" id="WifiFinderImg">
<input type="button" class="Headerbuttons" id="back" value="Actually, I already have an account!" onclick="document.location='searchpage.html';"/>
</div>
<div id="AccountRegistration">
<h2>Username</h2>
<input class="userinfo" type="text" value="Username Here"/>
<h2>Email Address</h2>
<input class="userinfo" type="email" value="Email Address"/>
<h2>Date of Birth</h2>
<input class="userinfo" type="date" value="DD/MM/YYYY"/>
<h2>Password</h2>
<input class="userinfo" type="password" value="Password"/>
<h2>Retype Password</h2>
<input class="userinfo" type="password" value="Password"/>
<label class="container">I have Read and Accept the Terms and Conditions
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">I have Read and Accept the Privacy Statement
<input type="checkbox">
<span class="checkmark"></span>
</label>
<input class="buttons" type="button" value="Create Account" onclick="alert('Hello World');"/>
</div>
</body>
The CSS for this is as follows:
:root{
--main-color: #0052CC;
--secondary-color: #172B4D;
--tertiary-color: #FFFFFF;
}
body {
background-color: var(--tertiary-color);
margin: 0%;
}
#Title {
position: absolute;
width: 100%;
height: 30%;
background-color: var(--main-color);
margin: 0%;
}
#WifiFinderImg{
position: absolute;
height: 100%;
width: 50%;
left: 0%;
bottom: 0%;
margin: 0%;
}
/*The main content on the account registration page*/
#AccountRegistration{
font-size: x-large;
position: absolute;
height: 70%;
overflow-y: scroll;
bottom: 0%;
color: var(--main-color);
width: 100%;
text-align: center;
border: var(--secondary-color) 1px solid;
}
/*Class to style user input feilds for account creation*/
.userinfo{
font-size: large;
width: 40%;
border: 0px;
border-bottom: 1px var(--main-color) solid;
text-align: center;
color: lightgrey;
}
/*Customize the label*/
.container {
display: block;
position: relative;
padding-left: 35px;
margin-top: 2%;
margin-bottom: 2%;
cursor: pointer;
font-size: x-large;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Hide the browser's default checkbox*/
.container input {
position: relative;
opacity: 0;
cursor: pointer;
}
/*Create a custom checkbox*/
.checkmark {
position: relative;
top: 0;
left: 35%;
height: 25px;
width: 25px;
background-color: lightgray;
}
/*On mouse-over, add a light grey background color*/
.container:hover input ~ .checkmark {
background-color: lightslategrey;
}
/*When the checkbox is checked, add a main colour background*/
.container input:checked ~ .checkmark {
background-color: var(--main-color);
}
/*Create the checkmark*/
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/*Show the checkmark when checked*/
.container input:checked ~ .checkmark:after {
display: block;
}
/*Style the checkmark*/
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid var(--tertiary-color);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Class to style all content buttons*/
.buttons{
position: relative;
margin-left: -10%;
margin-top: -5%;
margin-bottom: 2%;
top: 150%;
left: 5%;
font-size: x-large;
width: 20%;
height: 10%;
border: 1px var(--main-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover action for content buttons*/
.buttons:hover{
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
/*Buttons in the header*/
.Headerbuttons{
width: 15%;
height: 10%;
position: absolute;
top: 10%;
right: 2%;
border: 1px var(--tertiary-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover actions for buttons in the header*/
.Headerbuttons:hover{
background-color: var(--tertiary-color);
border-color: var(--tertiary-color);
color: var(--main-color);
}
It seems to work when I change the position of the checkbox from relative to absolute, but then the problem is that they are on different parts of the page for different sized screens.
Add display: inline-block;
Here is the working Snippet
:root {
--main-color: #0052CC;
--secondary-color: #172B4D;
--tertiary-color: #FFFFFF;
}
body {
background-color: var(--tertiary-color);
margin: 0%;
}
#Title {
position: absolute;
width: 100%;
height: 30%;
background-color: var(--main-color);
margin: 0%;
}
#WifiFinderImg {
position: absolute;
height: 100%;
width: 50%;
left: 0%;
bottom: 0%;
margin: 0%;
}
/*The main content on the account registration page*/
#AccountRegistration {
font-size: x-large;
position: absolute;
height: 70%;
overflow-y: scroll;
bottom: 0%;
color: var(--main-color);
width: 100%;
text-align: center;
border: var(--secondary-color) 1px solid;
}
/*Class to style user input feilds for account creation*/
.userinfo {
font-size: large;
width: 40%;
border: 0px;
border-bottom: 1px var(--main-color) solid;
text-align: center;
color: lightgrey;
}
/*Customize the label*/
.container {
display: block;
position: relative;
padding-left: 35px;
margin-top: 2%;
margin-bottom: 2%;
cursor: pointer;
font-size: x-large;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Hide the browser's default checkbox*/
.container input {
position: relative;
opacity: 0;
cursor: pointer;
}
/*Create a custom checkbox*/
.checkmark {
position: relative;
top: 4px;
left: 0;
height: 25px;
width: 25px;
background-color: lightgray;
display: inline-block; /* Added */
}
/*On mouse-over, add a light grey background color*/
.container:hover input ~ .checkmark {
background-color: lightslategrey;
}
/*When the checkbox is checked, add a main colour background*/
.container input:checked ~ .checkmark {
background-color: var(--main-color);
}
/*Create the checkmark*/
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/*Show the checkmark when checked*/
.container input:checked ~ .checkmark:after {
display: block;
}
/*Style the checkmark*/
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid var(--tertiary-color);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Class to style all content buttons*/
.buttons {
position: relative;
margin-left: -10%;
margin-top: -5%;
margin-bottom: 2%;
top: 150%;
left: 5%;
font-size: x-large;
width: 20%;
height: 10%;
border: 1px var(--main-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover action for content buttons*/
.buttons:hover {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
/*Buttons in the header*/
.Headerbuttons {
width: 15%;
height: 10%;
position: absolute;
top: 10%;
right: 2%;
border: 1px var(--tertiary-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover actions for buttons in the header*/
.Headerbuttons:hover {
background-color: var(--tertiary-color);
border-color: var(--tertiary-color);
color: var(--main-color);
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="javascript.js"></script>
</head>
<body>
<div id="Title"> <img src="" alt="WifiFinder.img" id="WifiFinderImg">
<input type="button" class="Headerbuttons" id="back" value="Actually, I already have an account!" onclick="document.location='searchpage.html';"/>
</div>
<div id="AccountRegistration">
<h2>Username</h2>
<input class="userinfo" type="text" value="Username Here"/>
<h2>Email Address</h2>
<input class="userinfo" type="email" value="Email Address"/>
<h2>Date of Birth</h2>
<input class="userinfo" type="date" value="DD/MM/YYYY"/>
<h2>Password</h2>
<input class="userinfo" type="password" value="Password"/>
<h2>Retype Password</h2>
<input class="userinfo" type="password" value="Password"/>
<label class="container">I have Read and Accept the Terms and Conditions
<input type="checkbox">
<span class="checkmark"></span> </label>
<label class="container">I have Read and Accept the Privacy Statement
<input type="checkbox">
<span class="checkmark"></span> </label>
<input class="buttons" type="button" value="Create Account" onclick="alert('Hello World');"/>
</div>
</body>
</html>
The problem is indeed that you've used position relative and absolute amateur-ly (throughout the code).
Since you've mentioned that the checkboxes are used at multiple places, you need to a way to apply different styles. For that, I will add another class here.
Replace this:
<span class="checkmark"></span>
and this
.checkmark {
position: relative;
top: 0;
left: 35%;
height: 25px;
width: 25px;
background-color: lightgray;
}
With this:
<span class="checkmark customCheckmark"></span>
and this
.checkmark {
position: relative;
top: 0;
left: 35%;
height: 25px;
width: 25px;
background-color: lightgray;
}
.checkmark.customCheckmark {
position: absolute;
top: auto;
left: auto;
height: 25px;
width: 25px;
background-color: lightgray;
}
CSS-Tricks might be able to explain this in more depth.
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Note: As a general rule of thumb, try not to use too many position relatives and absolutes, they mess up your CSS in most cases. If you're a beginner in CSS, try using Flexbox, it's much easier to learn and implement than conventional CSS.
Need to make a hamburger item with each line shorter than the last.
E.g.
------
-----
----
My idea is just to have a div with 3 spans inside it.
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<span class="menu_bar"></span>
<span class="menu_bar"></span>
<span class="menu_bar"></span>
</label>
And then in the CSS do e.g:
.menu_collapse_icon {
FOR EACH SPAN, REDUCE ITS LENGTH BY X AMOUNT?
}
But I don't know how to do this? I could just create 3 separate length bars, but would rather do it this way.
Add each element inside each other to create cascade:
.menu_bar {
padding-top: 10px;
width: 80%;
display: inline-block;
border-top: 1px solid #454545;
box-sizing: border-box;
}
.menu_collapse_icon_label {
width: 40px;
display: inline-block;
text-align: right;
font-size: 0;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px 10px 0 0;
}
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<div class="menu_bar">
<div class="menu_bar">
<div class="menu_bar"></div>
</div>
</div>
</label>
With the markup that you plan to have, this is not possible with a single selector. And am sure you will find many examples if you search.
However, am presenting this just for the sake of getting it done with a single selector. You will need nested elements for this.
label {
display: block; text-align: right;
border: 1px solid #bbb;
width: 32px; height: 32px;
padding: 4px 8px 4px 0px;
}
label span {
display: block; float: right; position: relative;
width: 75%; right: 0px; top: 8px;
border-bottom: 2px solid #999;
}
label > span { margin-top: -4px; }
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<span class="menu_bar">
<span class="menu_bar">
<span class="menu_bar"></span>
</span>
</span>
</label>
I suppose you could do something like below. You could probably make it responsive if you use percentages for i and the pseudo elements.
label {
display: block;
border: 1px solid #ccc;
width: 48px;
height: 48px;
position: relative;
}
i {
display: block;
background: #999;
height: 2px;
width: 50%;
position: absolute;
top: 50%;
margin-top: -1px;
right: 4px;
}
i::before, i::after {
right: 0;
position: absolute;
height: 2px;
background: #999;
content: "";
}
i::before {
width: 120%;
top: -8px;
}
i::after {
width: 80%;
bottom: -8px;
}
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<i class="menu-icon"></i>
</label>
However, I discourage it. You'd be better of creating an (SVG) icon that looks like this, and use it inline.
I managed to make it responsive, as a quick bit of fun. However, I do encourage you to look into icons. Here's the link to the responsive show case.
Important CSS:
i {
display: block;
background: #999;
height: 4%;
width: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 12%;
}
i::before, i::after {
right: 0;
position: absolute;
height: 100%;
background: #999;
content: "";
}
i::before {
width: 125%;
top: -400%;
}
i::after {
width: 75%;
bottom: -400%;
}
Is it possible to set the size of a checkbox using CSS or HTML across browsers?
width and size work in IE6+, but not with Firefox, where the checkbox stays 16x16 even if I set a smaller size.
It's a little ugly (due to the scaling up), but it works on most newer browsers:
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
transform: scale(2);
padding: 10px;
}
/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
/* Checkbox text */
font-size: 110%;
display: inline;
}
<input type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">
Option A
</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">
Option B
</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">
Option C
</span>
Working solution for all modern browsers.
input[type=checkbox] {
transform: scale(1.5);
}
<label><input type="checkbox"> Test</label>
Compatibility:
IE: 10+
FF: 16+
Chrome: 36+
Safari: 9+
Opera: 23+
iOS Safari: 9.2+
Chrome for Android: 51+
Appearance:
Chrome 58 (May 2017), Windows 10
An easy solution is use the property zoom:
input[type="checkbox"] {
zoom: 1.5;
}
<input type="checkbox" />
2020 version - using pseudo-elements, size depends on font size.
Default checkbox/radio is rendered outside of screen, but CSS creates virtual elements very similar to default elements. Supports all browsers, no blur. Size depends on font size. Keyboard actions (space, tabs) are also supported.
https://jsfiddle.net/ohf7nmzy/2/
body{
padding:0 20px;
}
.big{
font-size: 50px;
}
/* CSS below will force radio/checkbox size be same as font size */
label{
position: relative;
line-height: 1.4;
}
/* radio */
input[type=radio]{
width: 1em;
font-size: inherit;
margin: 0;
transform: translateX(-9999px);
}
input[type=radio] + label:before{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border:none;
border-radius: 50%;
background-color: #bbbbbb;
}
input[type=radio] + label:after{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: white;
border-radius: 50%;
transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
position:absolute;
content:'';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: white;
border-radius: 50%;
transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
border: 0.2em solid #8eb9fb;
margin-top: -0.2em;
margin-left: -0.2em;
box-shadow: 0 0 0.3em #3b88fd;
}
/*checkbox/*/
input[type=checkbox]{
width: 1em;
font-size: inherit;
margin: 0;
transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border:none;
border-radius: 10%;
background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
position: absolute;
content: '';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: white;
border-radius: 10%;
transform: scale(0.8);
}
/*checked*/
input[type=checkbox]:checked + label:before{
position:absolute;
content:'';
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
position: absolute;
content: "\2713";
left: -1.3em;
top: 0;
width: 1em;
height: 1em;
margin: 0;
border: none;
background-color: #3b88fd;
border-radius: 10%;
color: white;
text-align: center;
line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
border: 0.1em solid #8eb9fb;
margin-top: -0.1em;
margin-left: -0.1em;
box-shadow: 0 0 0.2em #3b88fd;
}
<input type="checkbox" name="checkbox_1" id="ee" checked />
<label for="ee">Checkbox small</label>
<br />
<input type="checkbox" name="checkbox_2" id="ff" />
<label for="ff">Checkbox small</label>
<hr />
<div class="big">
<input type="checkbox" name="checkbox_3" id="gg" checked />
<label for="gg">Checkbox big</label>
<br />
<input type="checkbox" name="checkbox_4" id="hh" />
<label for="hh">Checkbox big</label>
</div>
<hr />
<input type="radio" name="radio_1" id="aa" value="1" checked />
<label for="aa">Radio small</label>
<br />
<input type="radio" name="radio_1" id="bb" value="2" />
<label for="bb">Radio small</label>
<hr />
<div class="big">
<input type="radio" name="radio_2" id="cc" value="1" checked />
<label for="cc">Radio big</label>
<br />
<input type="radio" name="radio_2" id="dd" value="2" />
<label for="dd">Radio big</label>
</div>
2017 version - using zoom or scale
Browser will use non-standard zoom feature if it is supported (nice quality) or standard transform: scale (blurry on Safari) as fallback.
https://jsfiddle.net/ksvx2txb/11/
#supports (zoom:2) {
input[type="radio"], input[type=checkbox]{
zoom: 2;
}
}
#supports not (zoom:2) {
input[type="radio"], input[type=checkbox]{
transform: scale(2);
margin: 15px;
}
}
label{
/* fix vertical align issues */
display: inline-block;
vertical-align: top;
margin-top: 10px;
}
<input type="radio" name="aa" value="1" id="aa" checked />
<label for="aa">Radio 1</label>
<br />
<input type="radio" name="aa" value="2" id="bb" />
<label for="bb">Radio 2</label>
<br /><br />
<input type="checkbox" name="optiona" id="cc" checked />
<label for="cc">Checkbox 1</label>
<br />
<input type="checkbox" name="optiona" id="dd" />
<label for="dd">Checkbox 1</label>
I just came out with this:
input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐";}
input:checked + label:before {content:"☑";}
label:hover {color:blue;}
<input id="check" type="checkbox" /><label for="check">Checkbox</label>
Of course, thanks to this, you can change the value of content to your needs and use an image if you wish or use another font...
The main interest here is that:
The checkbox size stays proportional to the text size
You can control the aspect, the color, the size of the checkbox
No extra HTML needed !
Only 3 lines of CSS needed (the last one is just to give you ideas)
Edit:
As pointed out in the comment, the checkbox won't be accessible by key navigation. You should probably add tabindex=0 as a property for your label to make it focusable.
Preview:
http://jsfiddle.net/h4qka9td/
*,*:after,*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.switch {
margin: 50px auto;
position: relative;
}
.switch label {
width: 100%;
height: 100%;
position: relative;
display: block;
}
.switch input {
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 100;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
/* DEMO 3 */
.switch.demo3 {
width: 180px;
height: 50px;
}
.switch.demo3 label {
display: block;
width: 100%;
height: 100%;
background: #a5a39d;
border-radius: 40px;
box-shadow:
inset 0 3px 8px 1px rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.5);
}
.switch.demo3 label:after {
content: "";
position: absolute;
z-index: -1;
top: -8px; right: -8px; bottom: -8px; left: -8px;
border-radius: inherit;
background: #ababab;
background: -moz-linear-gradient(#f2f2f2, #ababab);
background: -ms-linear-gradient(#f2f2f2, #ababab);
background: -o-linear-gradient(#f2f2f2, #ababab);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
background: -webkit-linear-gradient(#f2f2f2, #ababab);
background: linear-gradient(#f2f2f2, #ababab);
box-shadow: 0 0 10px rgba(0,0,0,0.3),
0 1px 1px rgba(0,0,0,0.25);
}
.switch.demo3 label:before {
content: "";
position: absolute;
z-index: -1;
top: -18px; right: -18px; bottom: -18px; left: -18px;
border-radius: inherit;
background: #eee;
background: -moz-linear-gradient(#e5e7e6, #eee);
background: -ms-linear-gradient(#e5e7e6, #eee);
background: -o-linear-gradient(#e5e7e6, #eee);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
background: -webkit-linear-gradient(#e5e7e6, #eee);
background: linear-gradient(#e5e7e6, #eee);
box-shadow:
0 1px 0 rgba(255,255,255,0.5);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
}
.switch.demo3 label i {
display: block;
height: 100%;
width: 60%;
border-radius: inherit;
background: silver;
position: absolute;
z-index: 2;
right: 40%;
top: 0;
background: #b2ac9e;
background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
background: -o-linear-gradient(#f7f2f6, #b2ac9e);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
background: linear-gradient(#f7f2f6, #b2ac9e);
box-shadow:
inset 0 1px 0 white,
0 0 8px rgba(0,0,0,0.3),
0 5px 5px rgba(0,0,0,0.2);
}
.switch.demo3 label i:after {
content: "";
position: absolute;
left: 15%;
top: 25%;
width: 70%;
height: 50%;
background: #d2cbc3;
background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
background: -o-linear-gradient(#cbc7bc, #d2cbc3);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
background: linear-gradient(#cbc7bc, #d2cbc3);
border-radius: inherit;
}
.switch.demo3 label i:before {
content: "off";
text-transform: uppercase;
font-style: normal;
font-weight: bold;
color: rgba(0,0,0,0.4);
text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
position: absolute;
top: 50%;
margin-top: -12px;
right: -50%;
}
.switch.demo3 input:checked ~ label {
background: #9abb82;
}
.switch.demo3 input:checked ~ label i {
right: -1%;
}
.switch.demo3 input:checked ~ label i:before {
content: "on";
right: 115%;
color: #82a06a;
text-shadow:
0 1px 0 #afcb9b,
0 -1px 0 #6b8659;
}
<div class="switch demo3">
<input type="checkbox">
<label><i></i>
</label>
</div>
<div class="switch demo3">
<input type="checkbox" checked>
<label><i></i>
</label>
</div>
The appearance of checkboxes seems to be fixed by default. But as pointed out by Worthy7 this can be remedied using CSS appearance property. It will make checkboxes completely empty, so you can define your own appearance. What is nice about this: You can use your existing HTML code. Downside: It is experimental technology. Edge (legacy) and IE do not use the custom style.
Here are the needed CSS styles:
input[type=checkbox] {
width: 14mm;
-webkit-appearance: none;
-moz-appearance: none;
height: 14mm;
border: 0.1mm solid black;
}
input[type=checkbox]:checked {
background-color: lightblue;
}
input[type=checkbox]:checked:after {
margin-left: 4.3mm;
margin-top: -0.4mm;
width: 3mm;
height: 10mm;
border: solid white;
border-width: 0 2mm 2mm 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
display: inline-block;
}
<label><input type="checkbox"> Test</label>
Screenshots:
Chrome:
Firefox:
Edge:
Edge (legacy):
IE:
I think the simplest solution is re-style the checkbox as some users suggest. The CSS below is working for me, only requires a few lines of CSS, and answers the OP question:
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
vertical-align: middle;
width: 14px;
height: 14px;
font-size: 14px;
background-color: #eee;
}
input[type=checkbox]:checked:after {
position: relative;
bottom: 3px;
left: 1px;
color: blue;
content: "\2713"; /* check mark */
}
As mentioned in this post, the zoom property seems not to work on Firefox, and transforms may cause undesired effects.
Tested on Chrome and Firefox, should work for all modern browsers. Just change the properties (colors, size, bottom, left, etc.) to your needs. Hope it helps!
This should work
input {
width: 25px;
height: 25px;
}
It worked for me for Firefox and Chrome and iPhone's Firefox, Chrome and Safari at least.
I was looking to make a checkbox that was just a little bit larger and looked at the source code for 37Signals Basecamp to find the following solution-
You can change the font size to make the checkbox slightly larger:
font-size: x-large;
Then, you can align the checkbox properly by doing:
vertical-align: top;
margin-top: 3px; /* change to center it */
You can make checkboxes larger in Safari — which is generally resistant to the usual approaches — with this attribute: -webkit-transform: scale(1.3, 1.3);
Source
My reputation is slightly too low to post comments, but I made a modification to Jack Miller's code above in order to get it to not change size when you check and uncheck it. This was causing text alignment problems for me.
input[type=checkbox] {
width: 17px;
-webkit-appearance: none;
-moz-appearance: none;
height: 17px;
border: 1px solid black;
}
input[type=checkbox]:checked {
background-color: #F58027;
}
input[type=checkbox]:checked:after {
margin-left: 4px;
margin-top: -1px;
width: 4px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
display: inline-block;
}
input[type=checkbox]:after {
margin-left: 4px;
margin-top: -1px;
width: 4px;
height: 12px;
border: solid white;
border-width: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
display: inline-block;
}
<label><input type="checkbox"> Test</label>
My understanding is that this isn't easy at all to do cross-browser. Instead of trying to manipulate the checkbox control, you could always build your own implementation using images, javascript, and hidden input fields. I'm assuming this is similar to what niceforms is (from Staicu lonut's answer above), but wouldn't be particularly difficult to implement. I believe jQuery has a plugin to allow for this custom behavior as well (will look for the link and post here if I can find it).
I found this CSS-only library to be very helpful:
https://lokesh-coder.github.io/pretty-checkbox/
Or, you could roll your own with this same basic concept, similar to what #Sharcoux posted. It's basically:
Hide the normal checkbox (opacity 0 and placed where it would go)
Add a css-based fake checkbox
Use input:checked~div label for the checked style
make sure your <label> is clickable using for=yourinputID
.pretty {
position: relative;
margin: 1em;
}
.pretty input {
position: absolute;
left: 0;
top: 0;
min-width: 1em;
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
margin: 0;
padding: 0;
cursor: pointer;
}
.pretty-inner {
box-sizing: border-box;
position: relative;
}
.pretty-inner label {
position: initial;
display: inline-block;
font-weight: 400;
margin: 0;
text-indent: 1.5em;
min-width: calc(1em + 2px);
}
.pretty-inner label:after,
.pretty-inner label:before {
content: '';
width: calc(1em + 2px);
height: calc(1em + 2px);
display: block;
box-sizing: border-box;
border-radius: 0;
border: 1px solid transparent;
z-index: 0;
position: absolute;
left: 0;
top: 0;
background-color: transparent;
}
.pretty-inner label:before {
border-color: #bdc3c7;
}
.pretty input:checked~.pretty-inner label:after {
background-color: #00bb82;
width: calc(1em - 6px);
height: calc(1em - 6px);
top: 4px;
left: 4px;
}
/* Add checkmark character style */
.pretty input:checked~.pretty-inner.checkmark:after {
content: '\2713';
color: #fff;
position: absolute;
font-size: 0.65em;
left: 6px;
top: 3px;
}
body {
font-size: 20px;
font-family: sans-serif;
}
<div class="pretty">
<input type="checkbox" id="demo" name="demo">
<div class="pretty-inner"><label for="demo">I agree.</label></div>
</div>
<div class="pretty">
<input type="checkbox" id="demo" name="demo">
<div class="pretty-inner checkmark"><label for="demo">Please check the box.</label></div>
</div>
use this css code
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(1.5); /* IE */
-moz-transform: scale(1.5); /* FF */
-webkit-transform: scale(1.5); /* Safari and Chrome */
-o-transform: scale(1.5); /* Opera */
transform: scale(1.5);
padding: 10px;
}
The problem is Firefox doesn't listen to width and height. Disable that and your good to go.
input[type=checkbox] {
width: 25px;
height: 25px;
-moz-appearance: none;
}
<label><input type="checkbox"> Test</label>
The other answers showed a pixelated checkbox, while I wanted something beautiful.
The result looks like this:
Even though this version is more complicated I think it's worth giving it a try.
.checkbox-list__item {
position: relative;
padding: 10px 0;
display: block;
cursor: pointer;
margin: 0 0 0 34px;
border-bottom: 1px solid #b4bcc2;
}
.checkbox-list__item:last-of-type {
border-bottom: 0;
}
.checkbox-list__check {
width: 18px;
height: 18px;
border: 3px solid #b4bcc2;
position: absolute;
left: -34px;
top: 50%;
margin-top: -12px;
transition: border .3s ease;
border-radius: 5px;
}
.checkbox-list__check:before {
position: absolute;
display: block;
width: 18px;
height: 22px;
top: -2px;
left: 0px;
padding-left: 2px;
background-color: transparent;
transition: background-color .3s ease;
content: '\2713';
font-family: initial;
font-size: 19px;
color: white;
}
input[type="checkbox"]:checked ~ .checkbox-list__check {
border-color: #5bc0de;
}
input[type="checkbox"]:checked ~ .checkbox-list__check:before {
background-color: #5bc0de;
}
<label class="checkbox-list__item">
<input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;">
<div class="checkbox-list__check"></div>
</label>
JSFiddle: https://jsfiddle.net/asbd4hpr/
You can change the height and width in the code below
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border-radius:5px;
border:1px solid #ff7e02;
}
<div class="check">
<label class="container1">Architecture/Landscape
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
Put the checkbox inside a parent with display:grid and make sure it doesn't have margin:auto
https://codepen.io/sneffel/pen/oNPYvBx
body{
text-align:center;
}
.grid{
display:grid;
}
input{
height:25px;
}
<div class="container grid">
<input type="checkbox" id="first">
</div>
<form class="container">
<input type="checkbox" id="second">
</form>