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;
}
Related
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
}
I can't remove grey "shadow" effect from input type button on half of it:
I checked all methods on forum but:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
outline: white;
doesn't work...
Excample:
.background {
background-color: lightgrey;
width: 400px;
height: 300px;
}
.button {
position: absolute;
left: 10px;
top: 10px;
background-color: black;
border-radius: 50%;
border-width: 2px;
border-color: white;
width: 25px;
height: 25px;
color: white;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
outline: white;
}
.box {
position: absolute;
left: 20px;
top: 20px;
background-color: white;
width: 200px;
height: 100px;
}
<div class="background">
<div class="box">
</div>
<input type="button" class="button" value="x">
</div>
Forum posting system force me to write something more because I have many codelines in post. But I don't know what can I write more? Everthing is on image and in code above. So I write what this forum doesn't like: "Thanks at all :-)"
It is because of the border-style in the input type="button".
The reason you have that grey shadow is because it is set to 'outset', change this to solid for it to remove it :)
.button {
background-color: black;
border-radius: 50%;
border-width: 2px;
border-color: white;
border-style: solid;
}
change yourborder-color to transparent to remove any color, and will cause your border to take the color of the background due to border-width attribute
.button {
background-color: black;
border-radius: 50%;
border-width: 2px;
border-color: transparent; /* NEW */
}
I have a form:
<div class="ttSliderFrmCnt">
<form ref="form" class="ttSliderForm">
<input max="480" min="30" name="slider" type="range" value={this.props.totalSeconds}/>
</form>
</div>
I tried adding some custom styles, following this Css-tricks tutorial:
// Hide the default slider
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
// Style the thumb
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid $darkDivider;
height: $bodyTextSize;
width: $bodyTextSize;
border-radius: 50%;
background: $accentColor;
margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
border: 1px solid $darkDivider;
height: $titleTextSize;
width: $titleTextSize;
border-radius: 50%;
background: $accentColor;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
border: 1px solid $darkDivider;
height: $titleTextSize;
width: $titleTextSize;
border-radius: 50%;
background: $accentColor;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background: $accentColor;
border-radius: 2px;
border: 0.2px solid $darkDivider;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: $accentColor;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4px;
background: $accentColor;
border-radius: 2px;
border: 0.2px solid $darkDivider;
}
input[type=range]::-ms-track {
width: 100%;
height: 4px;
background: transparent;
border-color: transparent;
border-width: 2px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: $accentColor;
border: 0.2px solid $darkDivider;
border-radius: 2px;
}
input[type=range]:focus::-ms-fill-lower {
background: $accentColor;
}
input[type=range]::-ms-fill-upper {
background: $accentColor;
border: 0.2px solid $darkDivider;
border-radius: 2px;
}
input[type=range]:focus::-ms-fill-upper {
background: $darkSecondaryText;
}
The variables used are either sizes in px, or color definitions and should not matter.
Now a curious thing happens, when I inspect this in chrome I get a margin I did not define on the input itself:
input[type="range" i] {
-webkit-appearance: slider-horizontal;
color: rgb(144, 144, 144);
padding: initial;
border: initial;
margin: 2px;
}
Where does this come from and how can I override it?
This is the user agent stylesheet of your browser. If you want to override the rule, simply define the rule in your CSS.
input[type="range"] {
margin: 0px;
}
<div class="ttSliderFrmCnt">
<form ref="form" class="ttSliderForm">
<input max="480" min="30" name="slider" type="range" value={this.props.totalSeconds}/>
</form>
</div>
I have created a custom range style, and in Chrome it works but why does it not work in FireFox/Internet Explorer?
Chrome(works fine):
Firefox:
Internet Explorer:
CSS:
div#slider {
width: 100%;
}
div#slider > input[type="range"] {
-webkit-appearance: none !important;
width: 100%;
height: 20px;
background:#201f1f;
border-radius: 4px;
border:1px solid #6e6e6e;
}
div#slider > input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 13px;
height: 30px;
background-color: #3c3c3c;
border-radius: 5px;
border:1px solid #6e6e6e;
}
So, I think it`s the -webkit thingy, but where do I find these for IE en Firefox? I have searched on Google (-webkit list), but I find nothing. Also why is does it not have a normal height on IE?
Live demo: http://rgbgenerator.com/dev/
EDIT:
When I have:
div#slider > input[type="range"] {
-webkit-appearance: none !important;
-ms-appearance: none !important;
-moz-appearance: none !important;
-o-appearance: none !important;
appearance:none !important;
width: 100%;
height: 20px;
background:#201f1f;
border-radius: 4px;
border:1px solid #6e6e6e;
}
div#slider > input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 13px;
height: 30px;
background-color: #3c3c3c;
border-radius: 5px;
border:1px solid #6e6e6e;
}
div#slider > input[type="range"]::-moz-range-thumb {
-moz-appearance: none !important;
width: 13px;
height: 30px;
background-color: #3c3c3c;
border-radius: 5px;
border:1px solid #6e6e6e;
}
It works on Chrome, but not in FireFox?
Use:
.thing {
-webkit-appearance: value;
-moz-appearance: value;
appearance: value;
}
When you google a word with a '-' before it, google wil search for pages WITHOUT that word. So it's not very strange is google founds nothing ;)
The appearance property is not supported by: IE and Opera.
For more information:
Css tricks appearance
W3Schools documentation and browser support
This question already has answers here:
How to hide drop down arrow in IE8 & IE9?
(5 answers)
Closed 8 years ago.
This css code doesn't work.
select::-ms-expand {
display: none;
}
Code of my dropdown:
select::-ms-expand {
display: none;
}
select {
width: 100px;
height: 30px;
-webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/
-moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */
-ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
appearance: none;
background-color: none;
border: none;
border-top-right-radius: 0px;
border-bottom-right-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-bottom-right-radius:0px;
background-image: url('../img/arrow_question.png');
background-position: center;
background-size: 30%;
background-repeat: no-repeat;
}
I've been looking for a long time and can't find a solution.
Use appearance: none; to achieve what you are looking for.
For instance,
select{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: url("yourBackroundImagePath.extension") no-repeat scroll 0 0 transparent;
}
select::-ms-expand{
display: none;
}
Hope this helps.
This helped:
div {
width: 80px;
overflow: hidden;
border: 1px solid black;
}
select {
width: 100px;
border: 0px;
}