{"id":369,"date":"2015-07-19T03:51:07","date_gmt":"2015-07-19T03:51:07","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=369"},"modified":"2024-03-02T04:33:16","modified_gmt":"2024-03-02T04:33:16","slug":"how-to-style-html-input-range","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/how-to-style-html-input-range\/","title":{"rendered":"How to Style HTML Input Range"},"content":{"rendered":"<p>We have just recently added a new generator to CSSPortal.com, <a href=\"https:\/\/www.cssportal.com\/style-input-range\/\">Style HTML Input Range<\/a>. This generator will help you visually design a better input range than the generic one that is styled with your browser.<!--more--><br \/>\nThe generator will turn this input range:<br \/>\n<input type=\"range\" style=\"width:100%;\"><br \/>\ninto this with css:<\/p>\n<style>.ps7 input[type=range] {\n  height: 25px;\n  -webkit-appearance: none;\n  margin: 10px 0;\n  width: 100%;\n}\n.ps7 input[type=range]:focus {\n  outline: none;\n}\n.ps7 input[type=range]::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 5px;\n  cursor: pointer;\n  animate: 0.2s;\n  box-shadow: 0px 0px 0px #000000;\n  background: #2497E3;\n  border-radius: 1px;\n  border: 0px solid #000000;\n}\n.ps7 input[type=range]::-webkit-slider-thumb {\n  box-shadow: 0px 0px 0px #000000;\n  border: 1px solid #2497E3;\n  height: 18px;\n  width: 18px;\n  border-radius: 25px;\n  background: #A1D0FF;\n  cursor: pointer;\n  -webkit-appearance: none;\n  margin-top: -7px;\n}\n.ps7 input[type=range]:focus::-webkit-slider-runnable-track {\n  background: #2497E3;\n}\n.ps7 input[type=range]::-moz-range-track {\n  width: 100%;\n  height: 5px;\n  cursor: pointer;\n  animate: 0.2s;\n  box-shadow: 0px 0px 0px #000000;\n  background: #2497E3;\n  border-radius: 1px;\n  border: 0px solid #000000;\n}\n.ps7 input[type=range]::-moz-range-thumb {\n  box-shadow: 0px 0px 0px #000000;\n  border: 1px solid #2497E3;\n  height: 18px;\n  width: 18px;\n  border-radius: 25px;\n  background: #A1D0FF;\n  cursor: pointer;\n}\n.ps7 input[type=range]::-ms-track {\n  width: 100%;\n  height: 5px;\n  cursor: pointer;\n  animate: 0.2s;\n  background: transparent;\n  border-color: transparent;\n  color: transparent;\n}\n.ps7 input[type=range]::-ms-fill-lower {\n  background: #2497E3;\n  border: 0px solid #000000;\n  border-radius: 2px;\n  box-shadow: 0px 0px 0px #000000;\n}\n.ps7 input[type=range]::-ms-fill-upper {\n  background: #2497E3;\n  border: 0px solid #000000;\n  border-radius: 2px;\n  box-shadow: 0px 0px 0px #000000;\n}\n.ps7 input[type=range]::-ms-thumb {\n  margin-top: 1px;\n  box-shadow: 0px 0px 0px #000000;\n  border: 1px solid #2497E3;\n  height: 18px;\n  width: 18px;\n  border-radius: 25px;\n  background: #A1D0FF;\n  cursor: pointer;\n}\n.ps7 input[type=range]:focus::-ms-fill-lower {\n  background: #2497E3;\n}\n.ps7 input[type=range]:focus::-ms-fill-upper {\n  background: #2497E3;\n}<\/style>\n<div class=\"ps7\"><input type=\"range\"><\/div>\n<p>or any other color design you wish to use.<br \/>\nTo style the input range, we use the following vendor pseudo selectors.<\/p>\n<pre class=\"language-css\"><code>Firefox:\r\n::-moz-range-track\r\n::-moz-range-thumb\r\nInternet Explorer:\r\n::-ms-thumb\r\n::-ms-track\r\n::-ms-fill-lower\r\n::-ms-fill-upper\r\nWebkit (Chrome, Safari, Opera):\r\n::-webkit-slider-runnable-track\r\n::-webkit-slider-thumb\r\n<\/code><\/pre>\n<p>Although it is possible to apply styles directly to <span class=\"code\">input[type=range]<\/span>, you may run into problems with older browsers that have yet to implement to correct styles. Because of this we recommend using the vendor pseudo selectors to customize the range thumb and track.<\/p>\n<p>You can also use the <span class=\"code\">:focus<\/span> pseudo class to style the input range when the user has selected the tag.<\/p>\n<p>I hope you enjoy using the <a href=\"https:\/\/www.cssportal.com\/style-input-range\/\">HTML Input Range Generator<\/a> and can come up with some unique and interesting styles to use on you webpage. If you have designed something that you&#8217;re proud of and wish to show it off, just contact me with the code generated and I will add the design to the preset designs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have just recently added a new generator to CSSPortal.com, Style HTML Input Range. This generator will help you visually design a better input range than the generic one that is styled with your browser.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,7],"tags":[],"class_list":["post-369","post","type-post","status-publish","format-standard","hentry","category-css","category-html","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=369"}],"version-history":[{"count":7,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/369\/revisions"}],"predecessor-version":[{"id":713,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/369\/revisions\/713"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}