I have a label to the left of a text input but it looks like the text is just slightly below the bottom of the input. Here is my relevant HTML:
<div id="nickbox">
<label for="nickname" id="nicklabel">Nickname:</label>
<input type="text" id="nickname" value="" maxlength="20" size="20" role="textbox"
aria-label="Enter your nickname." data-lpignore="true" autofocus />
<input type="button" id="nicknameconfirm" value="Set" />
</div>
And my CSS:
#nickbox {
border: none;
display: inline;
padding: 5px;
background-color: #ffffff00;
align-self:center;
font-size: 2em;
}
#nickname {
background-color: #44475a;
border: none;
height: 2em;
width: 20em;
outline: none;
}
This is what the results look like. What can I do to change this? I assume I need to add some CSS to #nicklabel. Thanks.
Put vertical-align: middle; into #nickname
#nickname {
background-color: #44475a;
vertical-align: middle;
border: none;
height: 2em;
width: 20em;
outline: none;
}
http://jsfiddle.net/6xqgb0mu/
What about this?
#nickbox {
display: flex; /* Change display on parent */
border: none;
padding: 5px;
background-color: #fff;
font-size: 2em;
}
#nickname {
background-color: #44475a;
border: none;
height: 2em;
width: 20em;
outline: none;
align-self: center; /* Apply to child */
}
Use position: sticky; Like here: jsfiddle
#nicklabel{
top: 13px;
position: sticky;
}
Related
I have a simple square with a yes or no label:
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
<div class="textCenter">
<span class="yesNoSquare"></span>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
I want to add an "X" inside the square to do something like this:
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
.yesNoSquare-cross {
height: 10px;
width: 10px;
/*background-color: #FA6900;*/
position: relative;
border: 1px solid;
}
.yesNoSquare-cross:after {
position: absolute;
top: -45px;
bottom: 0;
left: 0;
right: 2px;
content: "\2716";
line-height: 100px;
text-align: center;
color: #000000;
}
<div class="textCenter">
<div class="yesNoSquare-cross"></div>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
I used div instead of span because span did not display the square correctly, but when I try it, the square with the "X" does not display in the same line.
The desired result:
Just add display: inline-block; to .yesNoSquare-cross.
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
.yesNoSquare-space {
padding-right: 20px;
}
.yesNoSquare-cross {
height: 10px;
width: 10px;
/*background-color: #FA6900;*/
position: relative;
border: 1px solid;
display: inline-block;/*the new code*/
}
.yesNoSquare-cross:after {
position: absolute;
top: -45px;
bottom: 0;
left: 0;
right: 2px;
content: "\2716";
line-height: 100px;
text-align: center;
color: #000000;
}
<div class="textCenter">
<div class="yesNoSquare-cross"></div>
<span class=" yesNoSquare-space itemsTableHeader"> YES</span>
<span class="yesNoSquare"></span>
<span class="itemsTableHeader"> NO</span>
</div>
All that is needed are two standard checkboxes or two standard radio buttons. You can customize the look, once you decide which one you want.
<input type="checkbox" id="check-yes">YES
<input type="checkbox" id="check-no">NO
<hr />
<input type="radio" id="radio-yes" name="yesno">YES
<input type="radio" id="radio-no" name="yesno">NO
Use the semantically correct tags which are <label> and <input type="checkbox"> or <input type="radio">. The example below shows how to customize labels, and checkbox/radio buttons. I used radio buttons since the boxes in OP were labeled "YES" and "NO". By assigning each radio button the same name value (in this case name="yn"), the radio button group become mutually exclusive, meaning that only one radio button can be checked while the other(s) must be unchecked.
html {
font: 300 2ch/1.25 'Segoe UI'
}
fieldset {
display: flex;
align-items: center;
width: max-content;
border-radius: 2px;
}
legend {
font-size: 1.1rem;
}
input {
font: inherit;
font-size: 100%;
}
label {
display: inline-flex;
align-items: center;
margin-right: 1rem;
cursor: pointer;
}
label:first-of-type {
margin-left: 0.45rem;
}
input.x {
display: none;
}
label b {
position: relative;
display: inline-flex;
align-items: center;
margin-right: 0.5rem;
padding: 3px;
border: 0.5px inset black;
border-radius: 2px;
transform: scale(1.75);
}
input.x:checked+label b::before {
content: '\2716';
position: absolute;
z-index: 1;
margin-left: -0.3rem;
font-style: oblique;
font-weight: 900;
font-size: 0.65rem;
line-height: 0.5;
color: #F00;
}
<fieldset>
<legend>Custom Radio Button Group</legend>
<input id='yes' class='x' name='yn' type='radio'>
<label for='yes'><b></b> YES</label>
<input id='no' class='x' name='yn' type='radio'>
<label for='no'><b></b> NO</label>
</fieldset>
I'm making an email form where people can submit their emails and be part of an email list, in order to do this I have made an input and a button that go side by side. The issue that I am getting is that even though the button and inputs are the exact same height, and should be aligned horizontally perfectly it instead has a pixel difference with the button being a pixel higher than the input. How can I fix this?
#form {
display flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.email-form {
padding: 60px;
margin-top: 85px;
color: #fff;
background: #000;
text-align: center;
}
.form input {
width: 300px;
height: 30px;
margin: 0;
display: inline;
outline: 0 none;
}
.form button {
height: 30px;
width: 90px;
margin: 0;
background: #707070;
color: #fff;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border: none;
cursor: pointer;
display: inline;
outline: 0 none;
}
<div class="form">
<form action="" id="email">
<input type="email" placeholder="Email" /><button type="submit" class="submit"><p>Sign up</p></button>
</form>
</div>
If you change
<p>Sign up</p>
To
<div>Sign up</div>
Or just
Sign up
It should work.
There's a bunch of margin settings on the <p> element that are overflowing and messing up your alignment.
Just remove p tag around the Sign up text.
<button type="submit" class="submit">Sign up</button>
#form {
display flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.email-form {
padding: 60px;
margin-top: 85px;
color: #fff;
background: #000;
text-align: center;
}
.form input {
width: 300px;
height: 30px;
margin: 0;
display: inline;
outline: 0 none;
}
.form button {
height: 30px;
width: 90px;
margin: 0;
background: #707070;
color: #fff;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border: none;
cursor: pointer;
display: inline;
outline: 0 none;
}
<div class="form">
<form action="" id="email">
<input type="email" placeholder="Email" />
<button type="submit" class="submit">Sign up</button>
</form>
</div>
I want to align those two buttons (Login and Registrar) at the same level but as they are different forms "Registrar" button is being placed on the "next line".
Here is the issue, visually:
Here is the code:
HTML
<section class="header_form_login">
<form action="index2.html" method="GET">
<label for="user">Usuario:<br></label>
<input type="text" id="user" name="user_input">
<label for="pass"><br>Contraseña:<br></label>
<input type="text" id="pass" name="pass">
<input type="submit" id="login" value="Login">
</form>
<form action="registro.html" method="GET">
<input type="submit" id="register" value="Registrar">
</form>
</section>
CSS:
header > section.header_form_login{
font-weight: 500;
align-items: right;
padding: 5px;
margin: auto;
margin-right: 20px;
}
header > section.header_form_login > form > input#user{
width: 200px;
height: 24px;
border: 1px solid lightgray;
}
header > section.header_form_login > form > input#pass{
width: 200px;
height: 24px;
border: 1px solid lightgray;
}
/* BUTTONS */
header > section.header_form_login > form > input#login{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
display: block;
margin-top: 10px;
}
header > section.header_form_login > form > input#register{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 30px;
cursor: pointer;
display: flex;
float: right;
margin-top: 10px;
}
Thanks a lot!!!
PD: Feel free to give me recommendations, I'm kinda new to html and css coding.
I need help with html and css, specifically, with buttons being placed at the same level vertically but from different forms
Update: Refactored CSS to share styles.
I would restructure your HTML and fix your CSS to get things working properly. Also, when using ids, they are meant to be unique, so there's no need for a long lookup query such as:
header > section.header_form_login > form > input#login { … }
Just use
#login { … }
To make the "buttons" align, I made the register input a link. This is pretty standard. Then I added some CSS to align these elements on the same line.
.form-buttons {
display: flex;
flex-wrap: nowrap;
}
Here is how I could restructure your markup and styles.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header_form_login {
font-weight: 500;
padding: 5px;
margin: auto;
width: 250px;
max-width: 100%;
}
#user,
#pass {
width: 100%;
padding: 5px;
border: 1px solid lightgray;
}
/* BUTTONS */
#login,
#register {
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
text-align: center;
flex: 1;
}
#login {
margin-right: 2.5px;
}
#register {
margin-left: 2.5px;
}
.form-buttons {
padding-top: 10px;
display: flex;
flex-wrap: nowrap;
}
<section class="header_form_login">
<form action="index2.html" method="GET">
<label for="user">Usuario:<br></label>
<input type="text" id="user" name="user_input">
<label for="pass">Contraseña:</label>
<input type="text" id="pass" name="pass">
<div class="form-buttons">
<input type="submit" id="login" value="Login">
Register
</div>
</form>
</section>
jsFiddle
I don't generally like there being two forms in the same place to drive 2 actions. Assuming that you don't need username and password sending to your register page, then I would implement as follows:
<section class="header_form_login">
<form action="index2.html" method="GET">
<label for="user">Usuario:<br></label>
<input type="text" id="user" name="user_input">
<label for="pass"><br>Contraseña:<br></label>
<input type="text" id="pass" name="pass">
<input type="submit" id="login" value="Login">
Registrar
</form>
</section>
CSS for Buttons:
/* BUTTONS */
header > section.header_form_login > form > input#login{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
cursor: pointer;
display: inline-block;
margin-top: 10px;
}
header > section.header_form_login > form > input#register{
border: none;
background-color: #CAB99F;
color: black;
font-weight: 500;
font-family: 'Roboto';
font-size: 15px;
text-decoration: none;
padding: 10px 30px;
cursor: pointer;
display: inline-block;
margin-top: 10px;
}
When I try to add float left or display inline, things break. Currently, I have a max-width of 1000px for the form. What I was hoping is somehow, the first, and last name will automatically float side by side if it is wide enough. So perhaps a min-width for inputs First and Last name?
Important note: I wrote this to test out writing CSS DRY code. You notice if you change the font size, the whole project changes size, So this is important to me. Also, I do not want to use media queries.
I am aware that I may need to change my approach, and I am open to that as well. Not so much looking for an exact code answer.
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
<form action="">
<ul>
<li>
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li>
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<li>
<input type="submit" name="submit">
</li>
</ul>
</form>
Flexbox is the most modern solution to this problem. However, remember to add the necessary prefixes for some browsers. If IE9 support is necessary, see the float solution below:
HTML
<form action="">
<ul>
<li class="split">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="split">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li class="fill">
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
CSS
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
#media only screen and (min-width: 768px) {
li {
clear: both;
}
li.split {
width: 50%;
float: left;
clear: none;
}
}
https://jsfiddle.net/qefo9eLr/
.fl-name {
display: flex;
flex-direction: row;
}
you can try to use bootstrap grid system
this way u can have the inputs into columns
bootstrap grid system
look at this fiddle:
gri system sample
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
in your case col-xs-6 will give you 2 columns fullwidth
Not exactly sure if this is what you're going for, but it seems to fit your criteria.
form {
text-align: center;
}
form ul,
form li,
form input,
form label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;
;
top: 0;
left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input,
form input:focus {
text-transform: capitalize;
}
form #fl-name {
display: inline-block;
}
form .floatMe {
float: left;
}
form .clearMe {
clear: right;
}
<form action="">
<ul>
<div class="fl-name">
<li class="floatMe">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="floatMe clearMe">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
</div>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
Here is another alternative using our old faithful floats: https://jsfiddle.net/mvpu6s5o/3/
The main difference is basically here:
form li {
width: 33.33%;
float: left;
}
form li:nth-child(3) {
float: right;
}
form li:last-child {
width: 100%;
clear: both;
}
I used a width with percentage to keep it fluid, so it'll adjust to different screen sizes. The li:nth-child(3) float the last input to the right, so we can get rid of a small gap at the end due to the 33.33% width. form li:last-child is used to clear both floats to the last input (since this too is an li).
I just change the semantic and apply flexbox. This is the result:
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
align-items: center;
/background-color: #EB6361;
display: flex;
height: 100vh;
justify-content: center;
}
form {
box-shadow: 0 0 0 8px rgba(204,204,204,.85);
border-radius: 5px;
width: 500px;
}
form header {
background-color: #1ABC9C;
}
form header p {
color: #FFF;
font-family: 'ubuntu';
font-size: 15px;
padding: 15px 10px;
text-align: center;
}
form .body {
background-color: #EEE;
padding: 15px 20px;
}
form .body .block {
border: 2px solid #333;
border-radius: 4px;
overflow: hidden;
}
form .body .block:not(first-of-type) {
margin-top: 10px;
}
form .body .block:first-of-type > .group {
width: 98%;
}
form .body .block:first-of-type {
display: flex;
}
form .body .block .group {
display: flex;
flex-flow: column-reverse nowrap;
overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
border-right: 2px solid #333;
}
form input {
background-color: transparent;
border: none;
color: #555;
font-size: 22pt;
padding: 6px 10px;
text-align: center;
}
form input:focus, form input:focus + label {
background-color: #F7F8E0;
}
form label {
border-bottom: 1px dotted #bbb;
color: #555;
font-family: 'ubuntu';
font-size: 11px;
padding: 2px;
text-align: center;
text-transform: uppercase;
}
form footer {
overflow: hidden;
}
form footer button {
background-color: #F39C12;
color: #FFF;
cursor: pointer;
width: 100%;
border: none;
padding: 4px;
}
<form action="">
<header>
<p>Submit Query Form</p>
</header>
<section class="body">
<div class="block">
<div class="group">
<input type="text" />
<label for="">First Name</label>
</div>
<div class="group">
<input type="text" />
<label for="">Last Name</label>
</div>
</div>
<div class="block">
<div class="group">
<input type="text" />
<label for="">Username</label>
</div>
</div>
</section>
<footer>
<button>Submit query</button>
</footer>
</form>
A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.
body {
padding: 50px;
}
.main {
background-color: #e9e9e9;
display: flex;
flex-wrap: wrap;
}
.main input {
background-color: #e9e9e9;
}
.one {
flex-grow: 1;
flex-basis: 300px
}
.two {
flex-grow: 1;
flex-basis: 300px;
}
<head>
<link rel="stylesheet" href="inline.css">
</head>
<body>
<form class="main">
<input type="text" class="one">
<input type="text" class="two">
</form>
</body>
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.