I wanted to customize the look of default browser sliders with CSS. If I write selectors for different vendors (moz and webkit) with a separator, WebKit doesn't detect the selector. Is this a bug or I'm missing something?
This doesn't work:
input {
-webkit-appearance: none;
appearance: none;
}
input::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background-color: red;
}
/* Multiple selection */
input::-moz-range-thumb,
input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: red;
height: 10px;
width: 10px;
cursor: pointer;
}
<input type="range" />
This Works:
input {
-webkit-appearance: none;
appearance: none;
}
input::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background-color: red;
}
/* No multiple selection */
/*input::-moz-range-thumb,*/
input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: red;
height: 10px;
width: 10px;
cursor: pointer;
}
<input type="range" />
Related
input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
width: 300px;
height: 20px;
background: lime;
}
input[type=range]::-webkit-slider-thumb,
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
background: red;
}
input[type=range]::-webkit-slider-thumb:hover,
input[type=range]::-moz-range-thumb:hover {
background: yellow;
}
<input type="range">
Why hover not working? As I set background color yellow on hover it should do the task.
Put separate css for firefox and try..
input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
width: 300px;
height: 20px;
background: lime;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
}
input[type=range]::-webkit-slider-thumb:hover {
background: yellow;
}
input[type=range]::-moz-range-thumb {
-moz-appearance: none;
width: 20px;
height: 20px;
background: red;
}
input[type=range]::-moz-range-thumb:hover {
background: yellow;
}
<input type="range">
I am currently trying to create a custom style-sheet overlaying the the default Bootstrap 4.3.1 theme and I'm having some difficulties with the checkboxes and radiobuttons.
I can't seem to figure out how to change the checkbox and radiobuttons color whenever they are checked. I wanna go from the default ones to these ones, whenever they are clicked.
I've tried to edit the _input-group.scss file so I can customize code:
.input-group-text {
display: flex;
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
#include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
white-space: nowrap;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
#include border-radius($input-border-radius);
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
background-color: #e5f0f8;
color: #005db8; // checkmark color;
}
}
For the size I created a copy of Bootstrap's _forms.scss file and overwrote the values:
.form-check-input {
position: absolute;
margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter;
width: 1.052rem; // changed default width
height: 1.052rem; //changed default height
&:disabled ~ .form-check-label {
color: $text-muted;
}
}
What am I doing wrong ? I'm open to suggestions, thank you in advance.
i also tried to overwright bootstrap check & radio but i think it's not possible. then i use custom scss. this may help you.
scss
/* Customize the label (the container) */
.custom-check {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Hide the browser's default checkbox */
input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #fff;
border: 1px solid #E1E6EB;
}
/* On mouse-over, add a grey background color */
&:hover input ~ .checkmark {
background-color: #ffffff;
}
/* When the checkbox is checked, add a blue background */
input:checked ~ .checkmark {
background-color: #ffffff;
border: 1px solid #E1E6EB;
display: flex;
justify-content: center;
align-items: center;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: url('data:image/svg+xml;charset=UTF-8, <svg width="14px" height="11px" viewBox="0 0 14 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="latest-from-careems-1.0(messages)" transform="translate(-326.000000, -546.000000)" fill="#0B97B7" fill-rule="nonzero"> <g id="tick-inside-circle" transform="translate(326.000000, 546.000000)"> <polygon id="Shape" points="1.97807018 5.1245614 0.75 6.35263158 4.69736842 10.3 13.4692982 1.52807018 12.2412281 0.3 4.69736842 7.84385965"></polygon> </g> </g> </g> </svg>');
position: absolute;
display: none;
}
/* Show the checkmark when checked */
input:checked ~ .checkmark:after {
display: block;
}
}
//custom radio
.custom-radio {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 12px;
font-size: 18px;
font-family: cormorantlightitalic;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Hide the browser's default radio button */
input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 5px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid #E1E6EB;
border-radius: 50%;
/* Create the indicator (the dot/circle - hidden when not checked) */
&:after {
content: "";
position: absolute;
display: none;
}
}
/* On mouse-over, add a grey background color */
&:hover input ~ .checkmark {
background-color: #fff;
border: 1px solid #0093B4;
}
/* When the radio button is checked, add a blue background */
input:checked ~ .checkmark {
background-color: #fff;
border: 1px solid #0093B4;
}
/* Show the indicator (dot/circle) when checked */
input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.checkmark:after {
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0093B4;
}
}
.custom-check {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.custom-check input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0
}
.custom-check .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #fff;
border: 1px solid #e1e6eb
}
.custom-check:hover input~.checkmark {
background-color: #fff
}
.custom-check input:checked~.checkmark {
background-color: #fff;
border: 1px solid #e1e6eb;
display: flex;
justify-content: center;
align-items: center
}
.custom-check .checkmark:after {
content: url('data:image/svg+xml;charset=utf-8,<svg width="14" height="11" xmlns="http://www.w3.org/2000/svg"><path d="M1.978 5.125L.75 6.353 4.697 10.3l8.772-8.772L12.241.3 4.697 7.844z" fill="%230B97B7" fill-rule="nonzero"/></svg>');
position: absolute;
display: none
}
.custom-check input:checked~.checkmark:after {
display: block
}
.custom-radio {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 12px;
font-size: 18px;
font-family: cormorantlightitalic;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.custom-radio input {
position: absolute;
opacity: 0;
cursor: pointer
}
.custom-radio .checkmark {
position: absolute;
top: 5px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid #e1e6eb;
border-radius: 50%
}
.custom-radio .checkmark:after {
content: "";
position: absolute;
display: none
}
.custom-radio:hover input~.checkmark,
.custom-radio input:checked~.checkmark {
background-color: #fff;
border: 1px solid #0093b4
}
.custom-radio input:checked~.checkmark:after {
display: block
}
.custom-radio .checkmark:after {
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0093b4
}
<label class="custom-check">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<br><br>
<div class="form-check form-check-inline">
<label class="custom-radio">Call
<input class="form-check-input" type="radio" name="contact_type" id="exampleRadios1" value="Call" checked>
<span class="checkmark"></span>
</label>
</div>
<div class="form-check form-check-inline">
<label class="custom-radio">Email
<input class="form-check-input" type="radio" name="contact_type" id="exampleRadios2" value="Email">
<span class="checkmark"></span>
</label>
</div>
As far as I know, overwriting browser default checkbox and the radio button is not possible, for achieving what you seek you should apply display: none; to the default radio and checkbox buttons and make custom ones by yourself.
For this purpose, you can check the following guides:
Styling Checkboxes and Radio Buttons
w3schools
EDIT: here is a simple but not very lean and tidy example below:
/* hide the regular checkbox */
.pd-checkbox input {
opacity: 0;
position: absolute;
}
/* position the label */
.pd-checkbox input,
.pd-checkbox label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pd-checkbox label {
position: relative;
}
/* style the unchecked checkbox */
.pd-checkbox input+label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
margin-right: 10px;
text-align: center;
font-size: 17px;
line-height: 15px;
}
/* style the checked checkbox */
.pd-checkbox input:checked+label:before {
content: "\f00c";
font-family: 'FontAwesome';
background: #e9f0fb;
color: #035fb7;
border-color: #9cb1c4;
}
/* hide the regular radio button */
.pd-radio input {
opacity: 0;
position: absolute;
}
/* position the label */
.pd-radio input,
.pd-radio label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pd-radio label {
position: relative;
}
/* style the unchecked radio button */
.pd-radio input+label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
line-height: 15px;
margin-right: 10px;
text-align: center;
}
.pd-radio input+label:before {
border-radius: 50%;
}
/* style the selected radio button */
.pd-radio input:checked+label:before {
content: "\f111";
font-family: 'FontAwesome';
background: #e9f0fb;
color: #035fb7;
border-color: #035fb7;
}
<!-- Load the Font Awesome Library via CDN -->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
<p class="form-field checkbox1 pd-checkbox required no-label">
<input id="checkbox1" name="checkbox1" onchange="" type="checkbox" value="">
<label class="inline" for="checkbox1">Checkbox</label>
</p>
<p class="form-field radio1 pd-radio required no-label ">
<span class="value">
<span class="" style="">
<input type="radio" name="radioButton" id="radioButton" value="" onchange="">
<label class="inline" for="radioButton">Radiobutton</label>
</span>
</span>
</p>
NOTE: I just used CSS above for more illustration and code snippets.
And here we got the SCSS codes:
$color_1: #035fb7;
$font_family_1: 'FontAwesome';
$border_color_1: #9cb1c4;
$border_color_2: #035fb7;
.pd-checkbox {
input {
opacity: 0;
position: absolute;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
&:checked&+label {
&:before {
content: "\f00c";
font-family: $font_family_1;
background: #e9f0fb;
color: $color_1;
border-color: $border_color_1;
}
}
}
label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
input&+label {
&:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
margin-right: 10px;
text-align: center;
font-size: 17px;
line-height: 15px;
}
}
}
.pd-radio {
input {
opacity: 0;
position: absolute;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
&:checked&+label {
&:before {
content: "\f111";
font-family: $font_family_1;
background: #e9f0fb;
color: $color_1;
border-color: $border_color_2;
}
}
}
label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
input&+label {
&:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
line-height: 15px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
}
}
}
I have a range input like this:
.my-slider {
vertical-align: middle;
-webkit-appearance: none;
margin-left: 5px;
width: 100%;
height: 10px;
border-radius: 5px;
color: white;
background: white;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.my-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
border: none;
cursor: pointer;
}
.my-slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
border: none;
cursor: pointer;
}
.my-slider::-moz-range-track {
background-color: white;
}
<input type="range" min="0" max="275" value="0" class="my-slider" id="myRange">
Things are looking fine except that when I click on the thumb, 2 dashed lines appear, which look like this:
I have tried adding border: none and outline: none rules to remove these, to no avail. This happens in Firefox only, the dashed lines don't show in Chrome.
Anyone know how to remove the dashed lines? Thanks!
Use ::-moz-focus-outer selector.
input[type=range]::-moz-focus-outer {
border: 0
}
This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 6 years ago.
I want to color the border of checkbox. I have written the below css -
input[type=checkbox] {
height: 15px;
width: 15px;
border: 1px solid #007dc6;
-webkit-appearance: none;
}
This works for chrome only. I don't want to write browser specific code in css. The css should apply to all latest browsers.
Manipulating checkbox appearance is possible by hiding the default checkbox and styling our own checkbox using the :before element and :checked , not(:checked) selectors
An Example:
body {
font-family: 'segoe ui';
background-color: white;
padding: 10px;
}
.space {
height: 10px;
}
.checkbox * {
box-sizing: border-box;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox {
display: inline-block;
}
.checkbox > input {
display: none;
}
.checkbox > label {
vertical-align: top;
font-size: 18px;
padding-left: 30px;
}
.checkbox > [type="checkbox"] + label:before {
color: #777;
content: '';
position: absolute;
left: 0px;
display: inline-block;
min-height: 20px;
height: 20px;
width: 20px;
border: 2px solid #777;
font-size: 15px;
vertical-align: top;
text-align: center;
transition: all 0.2s ease-in;
content: '';
}
.checkbox.radio-square > [type="checkbox"] + label:before {
border-radius: 0px;
}
.checkbox.radio-rounded > [type="checkbox"] + label:before {
border-radius: 25%;
}
.checkbox.radio-blue > [type="checkbox"] + label:before {
border: 2px solid #ccc;
}
.checkbox > [type="checkbox"] + label:hover:before {
border-color: lightgreen;
}
.checkbox > [type="checkbox"]:checked + label:before {
width: 8px;
height: 16px;
border-top: transparent;
border-left: transparent;
border-color: green;
border-width: 4px;
transform: rotate(45deg);
top: -4px;
left: 4px;
}
<div class="checkbox">
<input id="chkTest" type="checkbox" />
<label for="chkTest">Task one</label>
<div class="space">
</div>
<input id="chkTest1" type="checkbox" />
<label for="chkTest1">Task two</label>
</div>
Fiddle: https://jsfiddle.net/jo_Geek/jc81o4x0/
I'm trying to style range inputs on webkit. Everything works fine on Firefox but webkit display strange white dots around the track.
I read an article about this and took inspiration from it (link).
Now here is the demo. As you can see there are white dots I can't get rid off.
body {
padding: 30px;
background-color: black;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*required for proper track sizing in FF*/
width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: black;
border: none;
border-radius: 3px;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
<input type="range">
It must be very simple but I'm still struggling with this.
Thank you
The reason why you have four dots is input tag has default background color. i.e. background-color: white; from user agent stylesheet.
Try following CSS
input[type=range] {
-webkit-appearance: none;
border: 0px;
width: 300px;
background-color: transparent;
}