my web page is not working in IE and firefox
Question
I have one slider in page which is working perfectly in chrome browser but not working in IE or firefox, But I want this to work on all browsers (IE, firefox and chrome). And also I have written javascript oninput() function which I want it to run on all the browsers mentioned above.
<html> <head> <style> input[type=range] { -webkit-appearance: none; background-color: transparent; width: 300px; height: 20px; padding-top:10px; overflow:hidden; display: inline-block; vertical-align: middle; } input[type=range]:focus{ outline:none; } input[type="range"]::-webkit-slider-thumb { position:relative; -webkit-appearance: none; cursor:pointer; background-color: #f1f1f1; width: 10px; height: 30px; box-shadow: 1px 5px 10px -1px rgba(0, 0,0.2), -25px 0 0 20px rgba(0,0,255,0.3), -75px 0 0 20px rgba(0,0,255,0.3), -125px 0 0 20px rgba(0,0,255,0.3), -175px 0 0 20px rgba(0,0,255,0.3), -225px 0 0 20px rgba(0,0,255,0.3), -275px 0 0 20px rgba(0,0,255,0.3), -325px 0 0 20px rgba(0,0,255,0.3); z-index:2; } input[type="number"] { width: 80px; height: 20px; background-color: #f1f1f1; } input[type=number]:focus{ outline:none; } .number-wrapper { position: relative; } </style> </head> <body> <form align=center> Length<br><input type="range" id="Minlen_range" name="MinlenRange" min="1" max="100" value=10 oninput="this.form.MinlenInput.value=this.value" /> <input type="number" id="Minlen_text" name="MinlenInput" min="1" max="100" value=10 oninput="this.form.MinlenRange.value=this.value"> </form> </body> </html>
1 answers
solution1
0 2019-09-13 10:19:26
It's because you are using the -webkit-slider-thumb. It is for Webkit based clients, the IE and Firefox uses other motor, they ignores this.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Media queries in my web page not working in firefox and IE and Edge browsers
web page with java script not working in firefox
Safari not displaying web page (works in IE, Chrome, and Firefox)
How to print Web page in landscape (firefox IE11)?
Style issues with web page, works in firefox, not in ie or chrome
Disabling Browser Caching for a Web Page, Not Working for IE
ScrollSpy is not working properly under Firefox on my page
hyperlinks on entire page not working in Chrome or Firefox but work in IE
Anchor from another page not working in Firefox and IE (works in Chrome)
href javascript: generated by visual force page not working in firefox and IE
Related Tags