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
}
Related
I am adding buttons to my project and am having difficulty figuring out why the background around the svg is showing both the background of the button and the page's background in a square around the svg.
Any idea what how to fix my scss/css? The code sandbox is here.
* {
background: lightcoral;
}
button {
background-color: lightblue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 25px;
outline: none;
margin: 2rem;
transition: 0.3s ease-in-out;
cursor: pointer;
&:hover {
background: blue;
}
}
//Home button behavior is here
.home-button {
margin: 1rem;
border: none;
outline: none;
}
.home-pic {
border: none;
width: 2.5rem;
}
Here is how you fix it:
* {
background: lightcoral;
}
button {
background-color: lightblue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 25px;
outline: none;
margin: 2rem;
transition: 0.3s ease-in-out;
cursor: pointer;
&:hover {
background: blue;
// apply hover effect to the home button
.home-pic{
background: blue;
}
}
}
//Home button behavior is here
.home-button {
// do you really need these styles?
// margin: 1rem;
// border: none;
// outline: none;
}
.home-pic {
border: none;
// I added these styles
width: 1.1rem;
transition: 0.3s ease-in-out;
background-color: lightblue;
}
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.
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 problem in my button width. my form is able to switch language. For some language the content of the button is longer then the button width, How can I adjust the button width proprety to the text lenght ?
Here is my CSS :
html .formRowSubmit input[type="submit"] {
width: 26%;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You should try setting a min-width instead of a width, this will let the button expand if need be. Once you do this you should also set some horizontal padding so the text isnt butted up to the end like so:
input[type="submit"] {
min-width: 26%;
padding: 5px 15px;
}
http://jsfiddle.net/jqjxd0xt/
Display the button as an inline-block (and delete the width)
html .formRowSubmit input[type="submit"] {
/*width: 26%;*/
display: inline-block;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You might want to add some padding if the text is to close to the border.
Try like this: demo
CSS:
.formRowSubmit input[type="submit"] {
width: auto;
margin: 5px 0% 5px;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
HTML:
<div class="formRowSubmit">
<input type="submit" value="Submit loooong llloooonnnng text">
</div>
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;
}