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">
Related
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" />
This is a followup for a solved question :
transition background of pseudo element
The idea is to add a transition to the background color which appears when we do a hover, this following code works on IE11, but without the transition:
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
background: none;
border: none;
}
input[type=checkbox]:hover + label:before {
background: #D9DEEA;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
However, this code doesn't work on IE11, since it doesn't support var:
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ var(--s,0px 0px);
background-repeat:no-repeat;
transition:0.5s;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
background: none;
border: none;
}
input[type=checkbox]:hover + label:before {
--s:100% 100%;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
I have updated the code from the solution of my previous question, so it can work with IE11, but I couldn't figure out how to do a workaround for var in IE11.
Edit
Thanks to #Temani Afif answer, I managed to do the transition without the var and using checkbox with input (since pseudo element are not meant to be used on replaced elements such as form elements (inputs)):
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ 0px 0px;
background-repeat:no-repeat;
transition:0.5s;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
border: none;
}
input[type=checkbox]:hover + label:before {
background-size: 40px 40px;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
But in IE11 the background just appears instantly without the transition.
No CSS variables solution
.container {
position: relative;
height: 100px;
width: 300px;
padding: 24px;
box-sizing: border-box;
color: black;
border: 2px solid black;
}
input[type="checkbox"] {
height: 40px;
width: 40px;
position: absolute;
top: 12px;
right: 12px;
appearance: none;
outline: none;
cursor: pointer;
border: none;
background:
url("https://svgshare.com/i/Qo7.svg") calc(50% + 1px) 50% /60% 60%,
radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ 0px 0px;
background-repeat:no-repeat;
transition:0.5s;
}
input[type="checkbox"]:hover {
background-size:
60% 60%,
100% 100%;
}
input[type="checkbox"]:checked {
background-image:
url("https://svgshare.com/i/Qmp.svg"),
radial-gradient(farthest-side,#D9DEEA 99%,transparent);
}
<div class="container">
<input type="checkbox" >
</div>
I want to reduce the width and height of the box of my datetime picker. This is the image from my dateTimePicker.
And this is my component:
import React,{useState} from 'react';
import momentLocaliser from 'react-widgets-moment';
import DateTime from 'react-datetime';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import 'react-datetime/css/react-datetime.css';
const moment = require('moment');
moment.locale('es');
momentLocaliser(moment);
const DateTimePickerInput = ({
label,
format,
input,
width,
placeholder,
selected,
tooltip,
tooltipPlacement,
disabled,
defaultValue,
value,
onChange,
inputProps,
meta: { valid, touched, error},
showTime,
style,
...props
}) => {
const classes = classNames('form-group', {
'has-error': (touched && !valid),
'has-success': (touched && !valid)
})
return (
<div className={classes}>
<label htmlFor={input.name}>{label}</label> <br />
<DateTime
name = {input.name}
locale='es'
dateFormat= "DD-MM-YYYY"
timeFormat= "HH:mm:ss"
onChange={param => {
input.onChange(param)
}}
inputProps={{placeholder: !input.value ? 'Please, select a date': moment(input.value).format('DD-MM-YYYY HH:mm:ss')/*,disabled: true}*/}}
style={{}}
{(!valid && touched) &&
<p className='help-block'>{error}</p>
}
</div>
);
};
DateTimePickerInput.propTypes = {
disabled: PropTypes.bool,
input: PropTypes.object.isRequired,
label: PropTypes.string.isRequired,
meta: PropTypes.object.isRequired,
placeholder: PropTypes.string,
tooltip: PropTypes.string,
tooltipPlacement: PropTypes.string
}
export default DateTimePickerInput;
And this is my style sheet, the style sheet I'm importing from my DateTimePicker widget:
/*!
https://github.com/YouCanBookMe/react-datetime
*/
.rdt {
position: relative;
}
.rdtPicker {
display: none;
position: absolute;
width: 250px;
padding: 4px;
margin-top: 1px;
z-index: 99999 !important;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
border: 1px solid #f9f9f9;
}
.rdtOpen .rdtPicker {
display: block;
}
.rdtStatic .rdtPicker {
box-shadow: none;
position: static;
}
.rdtPicker .rdtTimeToggle {
text-align: center;
}
.rdtPicker table {
width: 100%;
margin: 0;
}
.rdtPicker td,
.rdtPicker th {
text-align: center;
height: 28px;
}
.rdtPicker td {
cursor: pointer;
}
.rdtPicker td.rdtDay:hover,
.rdtPicker td.rdtHour:hover,
.rdtPicker td.rdtMinute:hover,
.rdtPicker td.rdtSecond:hover,
.rdtPicker .rdtTimeToggle:hover {
background: #eeeeee;
cursor: pointer;
}
.rdtPicker td.rdtOld,
.rdtPicker td.rdtNew {
color: #999999;
}
.rdtPicker td.rdtToday {
position: relative;
}
.rdtPicker td.rdtToday:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-bottom: 7px solid #428bca;
border-top-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 4px;
right: 4px;
}
.rdtPicker td.rdtActive,
.rdtPicker td.rdtActive:hover {
background-color: #428bca;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.rdtPicker td.rdtActive.rdtToday:before {
border-bottom-color: #fff;
}
.rdtPicker td.rdtDisabled,
.rdtPicker td.rdtDisabled:hover {
background: none;
color: #999999;
cursor: not-allowed;
}
.rdtPicker td span.rdtOld {
color: #999999;
}
.rdtPicker td span.rdtDisabled,
.rdtPicker td span.rdtDisabled:hover {
background: none;
color: #999999;
cursor: not-allowed;
}
.rdtPicker th {
border-bottom: 1px solid #f9f9f9;
}
.rdtPicker .dow {
width: 14.2857%;
border-bottom: none;
cursor: default;
}
.rdtPicker th.rdtSwitch {
width: 100px;
}
.rdtPicker th.rdtNext,
.rdtPicker th.rdtPrev {
font-size: 21px;
vertical-align: top;
}
.rdtPrev span,
.rdtNext span {
display: block;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.rdtPicker th.rdtDisabled,
.rdtPicker th.rdtDisabled:hover {
background: none;
color: #999999;
cursor: not-allowed;
}
.rdtPicker thead tr:first-child th {
cursor: pointer;
}
.rdtPicker thead tr:first-child th:hover {
background: #eeeeee;
}
.rdtPicker tfoot {
border-top: 1px solid #f9f9f9;
}
.rdtPicker button {
border: none;
background: none;
cursor: pointer;
}
.rdtPicker button:hover {
background-color: #eee;
}
.rdtPicker thead button {
width: 100%;
height: 100%;
}
td.rdtMonth,
td.rdtYear {
height: 50px;
width: 25%;
cursor: pointer;
}
td.rdtMonth:hover,
td.rdtYear:hover {
background: #eee;
}
.rdtCounters {
display: inline-block;
}
.rdtCounters > div {
float: left;
}
.rdtCounter {
height: 100px;
}
.rdtCounter {
width: 40px;
}
.rdtCounterSeparator {
line-height: 100px;
}
.rdtCounter .rdtBtn {
height: 40%;
line-height: 40px;
cursor: pointer;
display: block;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.rdtCounter .rdtBtn:hover {
background: #eee;
}
.rdtCounter .rdtCount {
height: 20%;
font-size: 1.2em;
}
.rdtMilli {
vertical-align: middle;
padding-left: 8px;
width: 48px;
}
.rdtMilli input {
width: 100%;
font-size: 1.2em;
margin-top: 37px;
}
.rdtTime td {
cursor: default;
}
I'm using react-datetime as dependency. The box of the widget has too big width and I need to reduce the width of the box. How can I reduce the width of the box of my date time picker?
Override the CSS rules of react-datetime like the following:
.rdtPicker {
width: 400px; //Change it your preferred width
}
.rdtPicker tr {
height: 50px; //Choose the height of each row so that the overall height will change
}
Here's a working pen.
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%;
}
}
}
My CSS style for the range slider doesn't work on Edge. How can I fix the Problem?
I searched on the web for a solution. And added some codes but still not working.
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
/*I added this to fix for edge but it doesn't work */
input[type=range]::-ms-thumb{
width: 15px !important;
height: 15px !important;
border-radius: 50% !important;
background: #33A2D9 !important;
cursor: pointer !important;;
}
input[type=range]::-ms-fill-upper {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
input[type=range]::-ms-fill-lower {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
What it should look like (for example on Firefox):
What it look like on edge:
Your "mistake" (if we can call it that) was giving the input a background. You want to give it background-color of transparent and give the -track the desired shade.
Also, as a minor side note and general rule, avoid using background instead of background-color. It is shorter, but it sets a bunch of other background- properties, which you normally don't care about but are a source of common bugs.
Since it tends to be repetitive, I wrote it in SCSS:
$input-height: 16px;
$track-height: 6px;
$thumb-bg: #33A2D9;
$track-bg: #d3d3d3;
#mixin slider-thumb {
width: $input-height;
height: $input-height;
border-radius: $input-height/2;
background-color: $thumb-bg;
appearance: none;
}
#mixin slider-track {
height: $track-height;
border-radius: $track-height/2;
background-color: $track-bg;
appearance: none;
}
.slider[type=range] {
-webkit-transition: .2s;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: $input-height;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
&:hover, &:focus, &:active {
opacity: 1;
}
&::-webkit-slider- {
&runnable-track {
-webkit-appearance: none;
#include slider-track;
}
&thumb {
-webkit-appearance: none;
#include slider-thumb;
margin-top: -($input-height - $track-height)/2;
}
}
&::-moz-range- {
&track {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
&::-ms- {
&track {
#include slider-track;
}
&fill-upper {
#include slider-track;
}
&fill-lower {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
}
Resulting in the following CSS:
.slider[type=range] {
-webkit-appearance: none;
-webkit-transition: .2s;
width: 100%;
height: 16px;
border-radius: 3px;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
}
.slider[type=range]:hover, .slider[type=range]:focus, .slider[type=range]:active {
opacity: 1;
}
.slider[type=range]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-webkit-slider-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
-webkit-appearance: none;
appearance: none;
margin-top: -5px;
}
.slider[type=range]::-moz-range-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
.slider[type=range]::-ms-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-upper {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-lower {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
<input type=range class=slider>
Playground here.