Making a simple web mixing thing, but Chrome doesn't seem to like my CSS for the thumbs on my range sliders. The tracks for them seem to be working well enough (or well enough that I can sort out anything I'm not happy with).
input[type=range] {
-webkit-appearance: slider-vertical;
width: 20px;
height: 80%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 20px;
height: 80%;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #434546;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 40px;
width: 30px;
border-radius: 3px;
background: #ffffff;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #434546;
}
<div class="container">
<input type="range" />
</div>
Most of this came from, but I made a couple of changes: http://danielstern.ca/range.css/#/
Found the solution in a codepen snippet, you have to set -webkit-appeareance: none to the field:
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
background: transparent; /* Otherwise white in Chrome */
}
Whole example https://codepen.io/freoted/pen/bENyzL
This happend to me too, the solution was easy but it make me lost a lot of time investigating why. The solution is put -webkit-appearance: none; in thumb and in the runnable-track, in both. (chrome things I guess)
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
width: 20px;
height: 80%;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #434546;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 40px;
width: 30px;
border-radius: 3px;
background: #ffffff;
-webkit-appearance: none;
}
This article can help you http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
working the same for me
<!DOCTYPE html>
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">
input[type=range] {
-webkit-appearance: slider-vertical;
width: 20px;
height: 80%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 20px;
height: 80%;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #434546;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 40px;
width: 30px;
border-radius: 3px;
background: #ffffff;
-webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #434546;
}</style></head><body >
<div class="container">
<input type="range" />
</div></body></html>
Related
I am trying to get this output:
But I am getting this due to my lack of CSS knowledge:
Here is my CSS Code:
input[type=range] {
height: 39px;
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 1px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-radius: 0px;
border-bottom: 5px dotted #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #ddd;
height: 25px;
width: 50px;
border-radius: 50px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -11.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3071A9;
border-radius: 5px;
border: 1px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #91FF69;
border: 2px solid #FF6991;
height: 30px;
width: 15px;
border-radius: 5px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #3071A9;
border: 1px solid #000000;
border-radius: 10px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
background: #3071A9;
border: 1px solid #000000;
border-radius: 10px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 1px #91FF69;
border: 2px solid #FF6991;
height: 30px;
width: 15px;
border-radius: 5px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071A9;
}
input[type=range]:focus::-ms-fill-upper {
background: #3071A9;
}
Would you please help me to get this?
Try changing max value eg:
<input type="range" id="volume" name="volume"
min="0" max="1100">
This will make it work smoothly
I have a custom style input range and I want to have height 0 to support my style -> the idea is to not have any in built style so I can make my slider appear according to a separate span element styles included on top, so for the span element to be visible, my input range custom styles should not be visible at all.
While my idea worked like a charm it is preventing click from working on safari and chrome - on firefox the click still works properly, with height 0.
Is there a way to tweak my input range style such that I can achieve this? Please find my input range styles below:
Css
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
background: rgba(0, 0, 0, 0);
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
// background: rgba(13, 13, 13, 0);
background: rgba(0, 0, 0, 0);
}
Html
<input id="scrollbar" class="scrollbar" type="range" min=1 max=24 step="0.01" />
okay I solved the problem! We can provide background transparent. That made the slider clickable!
I found an excellent article on this topic.
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
border-radius: 0px;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}
<input id="scrubber" class="scrollbar" type="range" min=1 max=24 step="0.01" />
** Please run on chrome and safari to test:D
I hope this post helps someone.
I'm trying to style an input of type "range" so that it looks the same in multiple browsers.
I've found some neat resources that I have used ...
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
http://danielstern.ca/range.css/#/
http://www.cssportal.com/style-input-range/
... but there is one issue that does not seem to be addressed. That is that Firefox and other browsers consider the height of the input to be the height of the of the track and the thumb combined (or something similar), however, Chrome seems to only consider the height of the track to be the height of the entire input.
This is my code (condensed):
.container {
border: 1px solid red;
background-color: lightgreen;
margin-top: 10px;
}
p {
border: 1px solid blue;
margin: 0;
padding: 0;
}
input[type=text],
input[type=range] {
-webkit-appearance: none;
width: 200px;
margin: 0;
padding: 0;
display: block;
height: 50px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
animate: 0.2s;
background: #ccc;
border: 1px solid #333;
}
input[type=range]::-webkit-slider-thumb {
border: 1px solid #333;
height: 30px;
width: 8px;
background: #fff;
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 4px;
cursor: pointer;
animate: 0.2s;
background: #ccc;
border: 1px solid #333;
}
input[type=range]::-moz-range-thumb {
border: 1px solid #333;
height: 30px;
width: 6px;
background: #fff;
}
<div class="container">
<p>
Some text...
</p>
<input type="range" />
<p>
Some more text...
</p>
</div>
<div class="container">
<input type="text">
</div>
If you run this in Chrome and Firefox you will see that the two browsers treat this differently. In Chrome the input gets a white background.
If I remove the height: 50px; on the input[type=range], there is also an obvious difference between the way the browsers treat the height.
As you can see, this affects how the tags above and after the range input are positioned relatively.
How do I work around this?
Reference from css-tricks.com
Support Firefox 23+, Chrome 6+, IE 10+ as per testing
You have missed some CSS I have mention in comment
.container {
border: 1px solid red;
background-color: lightgreen;
margin-top: 10px;
}
p {
border: 1px solid blue;
margin: 0;
padding: 0;
}
input[type=text] {
height: 50px;
}
input[type=text],
input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 200px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* CSS is missing in your code */
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<div class="container">
<p>
Some text...
</p>
<input type="range" />
<p>
Some more text...
</p>
</div>
<div class="container">
<input type="text">
</div>
i've created a contact form with Contact Form 7 Plugin (Wordpress) checkbox but i can't chech them in Safari.
How can i solve it? http://www.r90.ch/contact-form/
CSS:
.myinput[type="checkbox"]{
width: 11px !important;
height: 11px !important;
border: 1px solid #808080 !important; }
Try this code for checkbox style
<style>
.regular-checkbox {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}
.regular-checkbox:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: #99a1a7;
}
</style>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
I have seen other complex effects being done with just CSS like the stacked paper effect:
http://jsfiddle.net/thefrontender/LwW7g/
<div class="slide expandable-slide">Title</div>
<div class="slide">Title</div>
.slide {
float: left;
display: block;
position: relative;
background: #FFF;
height: 10em;
width: 10em;
padding: 1em;
border: solid 2px #000;
margin-right: 2em;
}
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: -1em -1em #666,
-2em -2em #333;
}
My need is very similar except the 2 outer edges need to connect with the main frontal div:
Anyone know of any tricks that can make this possible?
If you're able to use CSS pseudo-elements:
.slide {
position: relative;
width: 200px; /* arbitrary, adjust to taste */
height: 500px; /* arbitrary, adjust to taste */
border: 2px solid #000;
border-right-width: 40px; /* this is the 'depth' of the 'sides' */
border-bottom-width: 40px;
}
.slide::before {
content: '';
position: absolute;
top: -2px; /* to cover the top of the border */
left: 100%;
border: 20px solid #fff;
border-bottom-color: transparent; /* allows the containing element's border to be seen */
border-left-color: transparent;
}
.slide::after {
content: '';
position: absolute;
top: 100%;
left: -2px;
border: 20px solid #fff;
border-top-color: transparent;
border-right-color: transparent;
}
JS Fiddle demo.
The above uses the following HTML:
<div class="slide">Title</div>
You could stack multiple box shadows to attain the effect you're after:
.slide {
height: 200px;
width: 100px;
padding: 1em;
border: solid 2px #000;
}
.expandable-slide {
margin: 10px 10px 0 10px;
box-shadow: 1px 1px #999,
2px 2px #999,
3px 3px #999,
4px 4px #999,
5px 5px #999,
6px 6px #999,
7px 7px #999,
8px 8px #999,
9px 9px #999,
10px 10px #999;
}
jsFiddle example
You could do it this way (not the most elegant but works like a charm):
.expandable-slide {
margin: 2em 2em 0 2em;
box-shadow: 0.05em 0.05em #555,
0.1em 0.1em #555,
0.15em 0.15em #555,
0.2em 0.2em #555,
0.25em 0.25em #555,
0.3em 0.3em #555,
0.35em 0.35em #555,
0.4em 0.4em #555,
0.45em 0.45em #555,
0.5em 0.5em #555
;
}
fiddle
.expandable-slide {
position: relative;
margin: 2em 2em 0 2em;
box-shadow: 20px 25px 0px 0px #333;
}
.expandable-slide:before {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-right: 15px solid #333;
border-top: 10px solid #333;
border-bottom: 15px solid #fff; /*match background color*/
border-left: 10px solid #fff;/*match background color*/
top: 194px;
left: 0px;
}
.expandable-slide:after {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-bottom: 15px solid #333;
border-left: 10px solid #333;
border-right: 10px solid #fff; /*match background color*/
border-top: 15px solid #fff;/*match background color*/
top: 0px;
left: 194px;
}