I want to customize a checkbox using the code below, but the styles are not being applied to my checkbox:
input[type=checkbox] {
display:none;
}
label + input[type=checkbox] {
background: green;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
label + input[type=checkbox]:checked {
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
<label for="thing">
<input type='checkbox' name='thing' value='valuable' id="thing"/>
</label>
JSFiddle Demo
Updated to reflect answer above using the appearance:none tag. Also works for accessibility.
label > input[type='checkbox'] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
background: green;
}
label > input[type='checkbox']:checked {
background: blue;
}
https://jsfiddle.net/b8uedf9p/
From your questions it seems you want a kind of css style on the check box. Try using appearance: none; to remove the default property of the checkbox. This way your css style will be applied. like so
input[type=checkbox] {
display:none;
}
label + input[type=checkbox]
{
background: green;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
label + input[type=checkbox]:checked
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<label for="thing">Checkbox</label><input type='checkbox' name='thing' value='valuable' id="thing"/>
Related
#slider1 {
-webkit-appearance: slider-vertical; /* This makes ... */
background-color: black;
width: 1px;
height: 100px;
}
#slider2 {
-webkit-appearance: none; /* the difference. */
background-color: black;
width: 100px;
height: 1px;
}
#slider1::-webkit-slider-thumb,
#slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04aa6d;
cursor: pointer;
}
#slider1::-webkit-slider-thumb:hover,
#slider2::-webkit-slider-thumb:hover {
width: 20px;
height: 20px;
}
<input type="range" id="slider1" />
<input type="range" id="slider2" />
As seen here, the CSS styling was almost same for both sliders, except for the -webkit-appearance property. But the horizontal slider (which is the default slider) accepts the styling while the vertical slider rejects it. I am on Chrome. How to make it work? Thanks!
It seems like there is no work around available to design vertical range, what you can do is to rotate the default one.
.wrap {
display: flex;
}
.slid1 {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 30px;
}
#slider1,
#slider2 {
-webkit-appearance: none;
/* the difference. */
background-color: black;
width: 100px;
height: 1px;
}
#slider1 {
-webkit-appearance: none;
/* This makes ... */
transform: rotate(270deg);
transform-origin: center;
}
#slider1::-webkit-slider-thumb,
#slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04aa6d;
cursor: pointer;
}
#slider1::-webkit-slider-thumb:hover,
#slider2::-webkit-slider-thumb:hover {
width: 20px;
height: 20px;
}
<div class="wrap">
<div class="slid1">
<input type="range" id="slider1" />
</div>
<div class="slid2">
<input type="range" id="slider2" />
</div>
</div>
Source
Edit: As per your comment, I have wrapped sliders into flex containers to align them.
In order to add custom styling to range slider, you need to set a css property -webkit-appearance: none; which you did in #slider2 but you missed it in #slider1.
Try the following code
<input type="range" id="slider1" />
<input type="range" id="slider2" />
<style type="text/css">
#slider1 {
-webkit-appearance: none; /* This makes ... */
background-color: black;
width: 1px;
height: 100px;
}
#slider2 {
-webkit-appearance: none; /* the difference. */
background-color: black;
width: 100px;
height: 1px;
}
#slider1::-webkit-slider-thumb,
#slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04aa6d;
cursor: pointer;
}
#slider1::-webkit-slider-thumb:hover,
#slider2::-webkit-slider-thumb:hover {
width: 20px;
height: 20px;
}
</style>
Then you will find the vertical slider
/* can you please try this below CSS code along with your css */
/*Chrome*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
input[type='range'] {
overflow: hidden;
width: 80px;
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
height: 10px;
-webkit-appearance: none;
color: #13bba4;
margin-top: -1px;
}
}
#slider1 {
margin-top: 50px;
transform: rotate(90deg);
}
#slider1, #slider2 {
-webkit-appearance: none; /* the difference. */
background-color: black;
width: 100px;
height: 1px;
}
#slider1::-webkit-slider-thumb,
#slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04aa6d;
cursor: pointer;
}
#slider1::-webkit-slider-thumb:hover,
#slider2::-webkit-slider-thumb:hover {
width: 20px;
height: 20px;
}
<input type="range" id="slider1" />
<input type="range" id="slider2" />
I have created a span & an input checkbox, but can't figure out how to style the checked arrow by given design which is where the checkbox is checked:
HTML:
<label class="form-label">
<input id="checkbox" type="checkbox">
<span>title</span>
</label>
CSS:
.form-label {
display: inline-flex;
cursor: pointer;
position: relative;
}
.form-label > input {
height: 20px;
width: 20px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #CDCDCD;
border-radius: 4px;
outline: none;
background-color: #ffffff;
cursor: pointer;
}
.form-label > input:checked {
border: 1px solid #000000;
background-color: #ffffff;
}
.form-label > input:checked + span::before {
content: '\2713';
display: block;
text-align: center;
color: #000000;
position: absolute;
left: 4px;
top: -1px;
}
.form-label > input:checked + span::before:focus {
outline: none;
}
Created a Jsfiddle for the example https://jsfiddle.net/ev2pxynL/1/
Any help will be appreciated, been strugling with this basic problem for a while now.
I want to create the arrow exactly as in the design.
In your checkbox you are using content which is predefined style. just link fontawesome
css and change content
.form-label > input:checked + span::before {
content: '\f00c';
}
Or Just google how to make custom checkbox or checkout below link.
How TO - Custom Checkbox
I've got some radio buttons which I'm formatting to look a little prettier than the standard CSS. When the text associated with the radio button is longer it wraps underneath the radio button and you cannot see some of the text. How do I get the text to wrap and align?
CSS:
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
background-color: #eee;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
width: 200px;
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'✓';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'✓';
text-indent: .9em;
color: #80ffff;
background-color: #0080c0;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
HTML:
<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1">First Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2">Second Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3">Third Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio4" class="radio"/>
<label for="radio4">Fourth Option is longer</label>
</div>
Here is a jsfiddle with my CSS and HTML.
change some css like
label {
border: 1px solid #d1d3d4;
border-radius: 3px;
display: block; /* add this property */
padding-left: 50px; /* add this property */
width: 200px;
}
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
/*text-indent: 3.25em; - remove this property*/
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
https://jsfiddle.net/gb8snazq/4/
Remove text-indent and use padding-left.
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
background-color: #eee;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
width: 200px;
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
line-height: 2.5em;
padding-left: 3em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'✓';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'✓';
text-indent: .9em;
color: #80ffff;
background-color: #0080c0;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1">First Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2">Second Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3">Third Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio4" class="radio"/>
<label for="radio4">Fourth Option is longer</label>
</div>
body {
font-family: sans-serif;
font-weight: normal;
margin: 10px;
color: #999;
background-color: #eee;
}
form {
margin: 40px 0;
}
div {
clear: both;
margin: 0 50px;
}
label {
width: 145px;
border-radius: 3px;
border: 1px solid #D1D3D4
}
/* hide input */
input.radio:empty {
margin-left: -999px;
}
/* style label */
input.radio:empty ~ label {
position: relative;
float: left;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 9px 0 9px 55px;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
line-height: 2.5em;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'\2714';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'\2714';
text-indent: .9em;
color: #9CE2AE;
background-color: #4DCB6D;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.radio:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
content:'✓';
text-indent: .9em;
color: #C2C2C2;
}
input.radio:hover:not(:checked) ~ label {
color: #888;
}
/* toggle on */
input.radio:checked ~ label:before {
content:'✓';
text-indent: .9em;
color: #80ffff;
background-color: #0080c0;
}
input.radio:checked ~ label {
color: #777;
}
/* radio focus */
input.radio:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1">First Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2">Second Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3">Third Option</label>
</div>
<div>
<input type="radio" name="radio" id="radio4" class="radio"/>
<label for="radio4">Fourth Option is longer</label>
</div>
Used padding instead of text-indent
line-height added to :before only
https://jsfiddle.net/afelixj/gb8snazq/5/
.input.radio:empty ~ label:before{
content: '✓';
color: #fff;
}
.input.radio:empty ~ label{
text-align:center;
}
<!-- You need to add some css -->
Look like this style
How do I align a label and a custom checkbox? The code snippet is below. I want to make sure that the label and switch are vertically aligned and I should also have the ability to use any text in the label. I cannot use the position:absolute method to align the label since the text might change and I dont want any overlap.
.switch {
position: relative;
display: inline-block;
}
.switch input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
outline: none;
height: 25px;
width: 50px;
border-radius: 25px;
background-color: #999;
}
.switch input[type="checkbox"]:checked {
background-color: green;
}
.switch input[type="checkbox"]:after {
position: absolute;
content: ' ';
height: 16.66667px;
width: 16.66667px;
top: 6.5px;
right: 33px;
border-radius: 11.11111px;
background: #fff;
}
.switch input[type="checkbox"]:checked::after {
right: 6px;
}
<div class="switch">
<label for="checkbox1">Test Test Test Test</label>
<input type="checkbox" id="checkbox1">
</div>
You should be able to use the vertical-align property on the input (ex: vertical-align: middle;):
.switch {
position: relative;
display: inline-block;
}
.switch input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
outline: none;
height: 25px;
width: 50px;
border-radius: 25px;
background-color: #999;
vertical-align: middle;
}
.switch input[type="checkbox"]:checked {
background-color: green;
}
.switch input[type="checkbox"]:after {
position: absolute;
content: ' ';
height: 16.66667px;
width: 16.66667px;
top: 6.5px;
right: 33px;
border-radius: 11.11111px;
background: #fff;
}
.switch input[type="checkbox"]:checked::after {
right: 6px;
}
<div class="switch">
<label for="checkbox1">Test Test Test Test</label>
<input type="checkbox" id="checkbox1">
</div>
I tried this code but nothing happened. I need to change the arrows by an image also rotate but I could not.
<style>
input[type=number] {
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0 8px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]:hover::-webkit-inner-spin-button {
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
</style>
<input type="number" value="0">
http://i.stack.imgur.com/YYySO.png
http://jsfiddle.net/josefelipe87/wf0w0dhw/
Different code for different browser in CSS
For mozila
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
For Chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}