Why is the element not centered in the checkbox?
Must be centered exactly in the middle of the checkbox.
when clicked, it should look like this:
Tried:
left: 50%; top: 50%; - does not seem to work.
I do not understand why horizontal scrolling appears when you click on the checkbox.
overflow-x: hidden; - not a solution
Code:
* {
box-sizing: border-box;
user-select: none;
}
section {
display: flex;
flex-direction: column;
padding: 0.5em;
}
input[type='checkbox'] {
height: 0;
width: 0;
}
input[type='checkbox']+label {
position: relative;
display: flex;
margin: .6em 0;
align-items: center;
color: #9e9e9e;
}
input[type='checkbox']+label>ins {
position: absolute;
display: block;
bottom: 0;
left: 2em;
height: 0;
width: 100%;
overflow: hidden;
text-decoration: none;
}
input[type='checkbox']+label>ins>i {
position: absolute;
bottom: 0;
font-style: normal;
color: #000;
}
input[type='checkbox']+label>span {
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.8em;
width: 1.2em;
height: 1.2em;
background: transparent;
border: 2px solid #E6ECF0;
border-radius: 3px;
cursor: pointer;
transition: all 250ms cubic-bezier(.4, .0, .23, 1);
}
input[type='checkbox']:checked+label>ins {
height: 100%;
}
input[type='checkbox']:checked+label>span {
border: .5em solid #7726E5;
}
input[type='checkbox']:checked+label>span:before {
content: "";
position: absolute;
box-shadow: inset 0px 0px 0px 5px rgba(0, 0, 0, 0.75);
border-radius: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkbox</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<section>
<input id='one' type='checkbox' />
<label for='one'>
<span></span>
Off with your head
<ins><i>Off with your head</i></ins>
</label>
<input id='two' type='checkbox' />
<label for='two'>
<span></span>
Dance ’til you’re dead
<ins><i>Dance ’til you’re dead</i></ins>
</label>
<input id='three' type='checkbox' />
<label for='three'>
<span></span>
Heads will roll
<ins><i>Heads will roll</i></ins>
</label>
<input id='four' type='checkbox' />
<label for='four'>
<span></span>
On the floor
<ins><i>On the floor</i></ins>
</label>
</section>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Honestly, it looks pretty well centered to me. The horizontal scroll appears because your black text (which you show on top of the grey text) is inside an element with 100% width, but its parent also contains the checkbox. I'd suggest just making the color of the original label darker, instead of using a second layer of text.
Here's an edit:
* { box-sizing: border-box; user-select: none; }
section{
display: flex;
flex-direction: column;
padding: 0.5em;
}
input[type='checkbox']{ height: 0; width: 0; }
input[type='checkbox'] + label{
position: relative;
display: flex;
margin: .6em 0;
align-items: center;
color: #9e9e9e;
}
input[type='checkbox'] + label > span{
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.8em;
width: 1.2em;
height: 1.2em;
background: transparent;
border: 2px solid #E6ECF0;
border-radius: 3px;
cursor: pointer;
transition: all 250ms cubic-bezier(.4,.0,.23,1);
}
input[type='checkbox']:checked + label > span{
border: .5em solid #7726E5;
}
input[type='checkbox']:checked + label > span:before{
content: "";
position: absolute;
box-shadow: inset 0px 0px 0px 5px rgba(0,0,0,0.75);
border-radius: 2px;
}
input[type='checkbox']:checked + label {
color: unset;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Checkbox</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<section>
<input id='one' type='checkbox' />
<label for='one'>
<span></span>
Off with your head
</label>
<input id='two' type='checkbox' />
<label for='two'>
<span></span>
Dance ’til you’re dead
</label>
<input id='three' type='checkbox' />
<label for='three'>
<span></span>
Heads will roll
</label>
<input id='four' type='checkbox' />
<label for='four'>
<span></span>
On the floor
</label>
</section>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
If you want the white square in the middle of your checkbox to be wider (as it looks in your png), you should make the border smaller here:
input[type='checkbox']:checked + label > span{
border: .5em solid #7726E5;
}
Related
I want to center the label vertically within the <li>, and add some padding to the label. How can I do this? Sorry if this is a dumb question, this is for a school project due tommorow.
TBH this is mostly stolen from this JSFiddle.
In context. In JSFiddle
:root{
--cream: #ECD9BA;
--wood: #824936;
--slate: #222C2A;
--white: #FFF;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-clip: border-box;
}
.q-wrap{
display: flex;
justify-content: center;
}
.question {
width: 80%;
display: flex;
flex-direction: column;
list-style-type: none;
}
.question li {
width: 100%;
min-height: 5rem;
margin: .5rem 0;
padding: 2rem 0;
position: relative;
}
.question label,
.question input {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.question input[type="radio"] {
opacity: 0;
}
.question input[type="radio"]:checked+label {
background-color: #E62222;
}
.question input[type="radio"].correct:checked+label {
background-color: #559905;
}
.question label {
font-size: 2rem;
font-weight: 900;
padding: 5px;
background-color: var(--wood);
color: var(--cream);
border: 2px solid var(--cream);
border-radius: 1rem;
cursor: pointer;
z-index: 90;
}
.question label:hover {
filter: brightness(110%)
}
.question input[type="radio"]:checked+label:hover{
filter: brightness(105%);
}
<div class="q-wrap">
<ul class="question">
<li>
<input type="radio" id="b2b" name="amount" />
<label for="b2b">B2B</label>
</li>
<li>
<input type="radio" id="p2p" class="correct" name="amount"/>
<label for="p2p">P2P</label>
</li>
<li>
<input type="radio" id="b2a" name="amount" />
<label for="b2a">B2A</label>
</li>
<li>
<input type="radio" id="c2c" name="amount" />
<label for="c2c">C2C</label>
</li>
</ul>
</div>
I tried adding padding-left: 2rem to .question label, but it doesn't work
Also, how do I make code snippets in Stack Overflow? I don't see the button for it, even though there are screenshots with it there.
I am trying to create a login page based on this one in HTML and CSS. Of course, my logo will be different, and I am trying to add some transparency to the background image.
I'm new to web dev, but I don't think this is too complicated. It's just one background pic, with a single div spreading across the screen to hold the username and password bars.
I have put what I've got so far into this JSFiddle: https://jsfiddle.net/6eLuw2th/
Here's the code:
body {
opacity: 0.2;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
z-index: 0;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
z-index: 0;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
z-index: 0;
}
button:hover {
opacity: 0.8;
z-index: 0;
}
.container {
padding: 16px;
z-index: 0;
}
span.psw {
float: right;
padding-top: 16px;
z-index: 0;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
As you can see, the username/password content appears to be behind the image (even though the z-index is -1 for the background?). I do want to make the background appear slightly transparent, but have been having a bit of trouble that as well. Furthermore, my username and password bars stretch across the entire screen; I would prefer for them to be more like the example page I'm trying to recreate, with the login info bars restricted to the middle of the screen.
Any help or suggestions would be greatly appreciated!
Actually the issue you are facing is not about z-index. the issue is that you have opacity:0.2 set on the body, that's why it looks weird:
body {
opacity: 0.2; /* just remove this line */
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
also I amended the form to have less width and centered:
form {
border: 3px solid #f1f1f1;
z-index: 0;
width: 60%;
margin: 0 auto;
}
label {
color: #FFF;
}
Here is a working snippet:
body {
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
z-index: 0;
width: 60%;
margin: 0 auto;
}
label {
color: #FFF;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
z-index: 0;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
z-index: 0;
}
button:hover {
opacity: 0.8;
z-index: 0;
}
.container {
padding: 16px;
z-index: 0;
}
span.psw {
float: right;
padding-top: 16px;
z-index: 0;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
1) You are not loading a faded background. You're loading a solid background and trying to fade the body, which faded EVERYTHING within the body, including your form.
2) Remove "width=100%" from your INPUT parts in the CSS and it will not stretch across the screen.
Body opacity affects everything in the body, so don't do it there.
Instead put the background image in a div
<div id="background"></div>
Then the css for it
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
}
For the input fields make sure not to have the width as 100%
If you want to have columns then check out:
https://www.w3schools.com/howto/howto_css_three_columns.asp
/*
Make the background in a div
*/
.bg {
width: 100%;
height: 100%;
position: fixed;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-position: center;
background-repeat: no-repeat;
opacity: 0.2;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<!-- the div that contains the background -->
<div class="bg"></div>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
Please see the code snippets for the effect you want to achieve.
body {
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size: cover;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text],
input[type=password] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 50%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px 16px 16px 180px;
background-color: rgba(238, 238, 238, 0.3);
;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label><br>
<input type="text" placeholder="Enter Username" name="uname" required><br>
<label for="psw"><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button><br>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
I'm having a problem with setting up box & shadow around my radio button. My CSS sets box only around radio button and shows nasty white square box around it. How to set border or outline around whole Radio-button + text to make selection more distinctive.
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item input:checked {
/*border: 1px solid dodgerblue;*/
box-shadow: 3px 3px 11px 1px dodgerblue;
}
<div class="form-check enrgy-form">
<label class="form-check-label label-nowrapp selected-item">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()">Fuel-fired</label>
</div>
I think your best bet is to simulate the radio button with css so you can have the behavior you want.
You should first set the input to display: none and give it an id in your HTML so you can link it with the label, by giving the label a for attribute, this way you can control the check/uncheck of your radio button from the label.
Next you want to simulate the appearance of the radio button, i'll do this by adding two spans, one inside the other, so we can have a checked/unchecked status.
try this:
enrgy-form {
width: 50%;
float: right;
}
.label-width {
margin-left: 22px;
white-space: nowrap;
}
.label-nowrapp {
white-space: nowrap;
}
.selected-item {
display: none;
}
.selected-item:checked + label {
box-shadow: 0px 0px 11px 2px dodgerblue;
}
label{
padding: 3px;
}
label .bullet{
border-radius: 50%;
border: 1px solid gray;
background-color: lightgray;
margin-right: 3px;
display: inline-block;
width: 10px;
height: 10px;
position: relative;
}
.selected-item:checked + label .bullet .bullet-selected{
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 5px;
height: 5px;
background-color: gray;
}
<div class="form-check enrgy-form">
<input class="form-check-input selected-item" type="radio" name="energy" formControlName="energy" value="Energy" (change)="setOptions()" id="someUniqueId"/>
<label class="form-check-label label-nowrapp" for="someUniqueId">
<span class="bullet">
<span class="bullet-selected"></span>
</span>
Fuel-fired
</label>
</div>
You could go the route where you style the whole radio button using :before and :after in CSS. That way you could even go nuts with animations and stuff...
It would require you to change the HTML a bit as well....
There's plenty of examples to be found if you search for "css custom radio".
[type="radio"]{
position: absolute;
left: -9999px;
}
[type="radio"] + label
{
position: relative;
padding: 0 20px;
cursor: pointer;
}
[type="radio"] + label:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked + label:before{
box-shadow: 0px 1px 11px 1px dodgerblue;
}
[type="radio"] + label:after{
content: '';
display: none;
width: 10px;
height: 10px;
background: gray;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
}
[type="radio"]:checked + label:after {
display: block;
}
<div class="form-check enrgy-form">
<input type="radio" name="energy" id="one">
<label for="one">Fuel-fired</label>
</input>
<input type="radio" name="energy" id="two">
<label for="two">Something else</label>
</input>
</div>
Update
Here is a possible solution, you could modify it as you want!
.form-check {
position: relative;
display: inline-flex;
align-items: center;
font-size: 1rem;
}
.form-check-label {
font-size: 0.9em;
margin-right: 0.25em;
white-space: nowrap;
}
.form-check-input {
margin: 0;
margin-right: 0.5em;
}
.form-check-input:checked + .form-check-label:after {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
border-radius: 1.5em 8px 8px 1.5em;
box-shadow: 3px 3px 11px 1px dodgerblue;
}
.medium { font-size: 2rem; }
.medium input[type=radio] { zoom: 2 }
.big { font-size: 3rem; }
.big input[type=radio] { zoom: 3 }
<div class="form-check">
<input id="inputcheck" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck" class="form-check-label">Fuel-fired normal</label>
</div>
<br><br>
<div class="form-check medium">
<input id="inputcheck1" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck1" class="form-check-label">Fuel-fired medium</label>
</div>
<br><br>
<div class="form-check big">
<input id="inputcheck2" class="form-check-input" type="radio" name="energy" formControlName="energy" value="Energy">
<label for="inputcheck2" class="form-check-label">Fuel-fired big</label>
</div>
So the issue I can't seem to solve is how to move the obscured divs under the radio+label buttons.
My Html
My CSS
/*color palette: abls
[lightest to darkest]
#eeeeee
#eaffc4
#b6c399
#6a856a
#333333
*/
body {
background-color: #333333;
font-family: monospace;
display: flex;
justify-content: center;
}
div {
/*background-color: red;*/
width: 100%;
height: 100%;
justify-content: center;
}
/*aesthetics for header*/
.Ghead {
font-size: 250%;
color: #eeeeee;
font-weight: lighter;
text-align: center;
border-color: red;
}
/*color for the 3 lines*/
hr:nth-child(1) {
border-color: #eaffc4;
max-width: 20%;
}
hr:nth-child(2) {
border-color: #b6c399;
max-width: 25%;
}
hr:nth-child(3) {
border-color: #6a856a;
max-width: 30%;
}
/*style for radio button container*/
.mGalD {
position: relative;
/*background-color: blue;*/
display: flex;
}
input[type=radio] {
display:none;
}
/*handles aesthetics of active buttons*/
label {
padding: 5px 7px;
border-radius: 5px;
display: inline-block;
font-size: 14px;
color: #6a856a;
}
input:checked + label {
background-color: #eaffc4;
}
/*handles the appearance of active divs in the display area*/
label + div {
position: relative;
color: red;
border: 2pt solid #eaffc4;
border-radius: 5px;
margin: 5px 0 0 0;
display: none;
max-width: 50%;
}
input:checked + label + div {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./NewbTests.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png">
<title>Viewport</title>
</head>
<body>
<div>
<h1>
<!--title and aesthetics for the head of the page-->
<div class="Ghead">
Viewport
<hr>
<hr>
<hr>
</div>
</h1>
<!--Labeled Radio buttons which activate css to reveal divs-->
<div class="mGalD">
<input type="radio" name="gal" id="g1" value="1">
<label for="g1">gallery 1</label><div>one</div>
<input type="radio" name="gal" id="g2" value="2">
<label for="g2">gallery 2</label><div>two</div>
<input type="radio" name="gal" id="g3" value="3">
<label for="g3">gallery 3</label><div>three</div>
</div>
</div>
</body>
</html>
I would have linked a few images to illustrate what is happening but I'm limited in links.
In essence;
Before:
(button 1)(button 2)(button 3)
Upon clicking any button:
(button 1)[_______________________] (button 2)(button 3)
The div shows up on the side of the corresponding button.
I don't really know what to do to have it align in a column without separating all of the divs and breaking the inline style of the buttons
Hope this works
body, html {
padding: 0;
margin: 0;
}
body {
background: linear-gradient(top left, red, orange);
}
span {
display: none;
position: absolute;
max-width: 450px;
left: 17px;
top: 48px;
padding: 3px;
min-height: 30px;
border-top: 1px solid #d3d3d3;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px;
margin: 10px 0 0 0;
background: #e0e0e0;
color: black;
}
label:first-child {
margin-left: 10px;
}
input {
display: none;
}
input:checked + span {
display: initial;
}
h3 {
border-top: 1px solid;
padding-top: 5px;
position: absolute;
top: 150px;
left: 15px;
}
<label for="btn_one">Gallery 1</label>
<input type="radio" id="btn_one" name="nesto" checked="checked"/>
<span class="tab1">Gallery One</span>
<label for="btd_two">Gallery 2</label>
<input type="radio" id="btd_two" name="nesto"/>
<span class="tab2">Gallery two</span>
<label for="btd_tree">Gallery 3</label>
<input type="radio" id="btd_tree" name="nesto"/>
<span class="tab2">Gallery Three</span>
The heading pretty much explains it. I have a couple of checkboxes inside a scrollable div. But for some reasons the 'background-color' attribute doesn't work. Although the 'margin-top' does seem to work...
Just puzzling me how one attribute can work and another not. It's also not like the div has it's own set of background color attributes that could potentially over ride the checkboxes attributes.
Anyways, below is my HTML (which is generated by JSP):
<div class="listContainer">
<input type="checkbox" class="oddRow">item1<br/>
<input type="checkbox" class="evenRow">item2<br/>
<input type="checkbox" class="oddRow">item3<br/>
<input type="checkbox" class="evenRow">item4<br/>
...
</div>
And here is my CSS:
.listContainer {
border:2px solid #ccc;
width:340px;
height: 225px;
overflow-y: scroll;
margin-top: 20px;
padding-left: 10px;
}
.oddRow {
margin-top: 5px;
background-color: #ffffff;
}
.evenRow{
margin-top: 5px;
background-color: #9FFF9D;
}
A checkbox does not have background color.
But to add the effect, you may wrap each checkbox with a div that has color:
<div class="evenRow">
<input type="checkbox" />
</div>
<div class="oddRow">
<input type="checkbox" />
</div>
<div class="evenRow">
<input type="checkbox" />
</div>
<div class="oddRow">
<input type="checkbox" />
</div>
In addition to the currently accepted answer: You can set border and background of a checkbox/radiobutton, but how it is rendered in the end depends on the browser. For example, if you set a red background on a checkbox
IE will show a red border instead
Opera will show a red background as intended
Firefox, Safari and Chrome will do nothing
This German language article compares a few browsers and explains at least the IE behavior. It maybe bit older (still including Netscape), but when you test around you'll notice that not much has changed. Another comparison can be found here.
You can use peseudo elements like this:
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 8px;
cursor: pointer;
font-size: 27px;
}
input[type=checkbox]:after {
content: " ";
background-color: #9FFF9D;
display: inline-block;
visibility: visible;
}
input[type=checkbox]:checked:after {
content: "\2714";
}
<label>Checkbox label
<input type="checkbox">
</label>
After so much trouble i got it.
.purple_checkbox:after {
content: " ";
background-color: #5C2799;
display: inline-block;
visibility: visible;
}
.purple_checkbox:checked:after {
content: "\2714";
box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
border-radius: 3px;
height: 12px;
display: block;
width: 12px;
text-align: center;
font-size: 9px;
color: white;
}
<input type="checkbox" class="purple_checkbox">
It will be like this when checked with this code.
My solution
Initially posted here.
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
}
input[type="checkbox"]:checked {
background: #2aa1c0;
}
input[type="checkbox"]:hover {
filter: brightness(90%);
}
input[type="checkbox"]:disabled {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
input[type="checkbox"]:after {
content: '';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
input[type="checkbox"]:disabled:after {
border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>
2022 - there is a much better solution to this problem now
Just use the accent-color property and make sure you achieve proper contrast ratios for accessibility:
.blue-checkbox {
accent-color: #00eaff;
height: 30px; /* not needed */
width: 30px; /* not needed */
}
<input class="blue-checkbox" type="checkbox" />
We can provide background color from the css file. Try this one,
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
width: 25px;
height: 25px;
background: gray;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
position: relative;
left: -5px;
top: -5px;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: blue;
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 25px;
height: 25px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="checkbox-container">
<input type="checkbox" />
</div>
</body>
</html>
The Best solution to change background checkbox color
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
}
input[type=checkbox]:checked:after {
content: "✓";
font-size: 12px;
}
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br>
Improving another answer here
input[type=checkbox] {
cursor: pointer;
margin-right: 10px;
}
input[type=checkbox]:after {
content: " ";
background-color: lightgray;
display: inline-block;
position: relative;
top: -4px;
width: 24px;
height: 24px;
margin-right: 10px;
}
input[type=checkbox]:checked:after {
content: "\00a0\2714";
}
When you input the body tag, press space just one time without closing the tag and input bgcolor="red", just for instance. Then choose a diff color for your font.