Use unprefixed input range sel
Input Range lets you style input ranges with unprefixed selectors.
/* before */
::range-track {
background: #3071a9;
width: 100%;
}
::range-thumb {
border-radius: 3px;
cursor: pointer;
}
/* after */
::-moz-range-track {
background: #3071a9;
width: 100%;
}
::-ms-track {
background: #3071a9;
width: 100%;
}
::-webkit-slider-runnable-track {
background: #3071a9;
width: 100%;
}
::-moz-range-thumb {
border-radius: 3px;
cursor: pointer;
}
::-ms-thumb {
border-radius: 3px;
cursor: pointer;
}
::-webkit-slider-thumb {
border-radius: 3px;
cursor: pointer;
}
Supported selectors
::range-track
Styles the track of a range.
::range-thumb
Styles the thumb of a range.
::range-lower
Styles the lower track of a range before the thumb. Only supported in Firefox, Edge and IE 10+.
::range-upper
Styles the upper track of a range after the thumb. Only supported in Edge and IE 10+.
Optionsmethod
Type: String
Default: 'replace'
clone
Copies any rules with ::range pseudo-elements to new rules using prefixes.
/* before */
::range-thumb {
border-radius: 3px;
}
/* after */
::-moz-range-thumb {
border-radius: 3px;
}
::-ms-thumb {
border-radius: 3px;
}
::-webkit-slider-thumb {
border-radius: 3px;
}
::range-thumb {
border-radius: 3px;
}
replace
Copies any rules with ::range pseudo-elements to new rules using prefixes while removing the original.
/* before */
::range-thumb {
border-radius: 3px;
}
/* after */
::-moz-range-thumb {
border-radius: 3px;
}
::-ms-thumb {
border-radius: 3px;
}
::-webkit-slider-thumb {
border-radius: 3px;
}
warn
Warns whenever a ::range pseudo-class is found.
strict
Type: Boolean
Default: true
true
Ignores prefixed ::range-type pseudo-classes.
/* before */
::-ms-thumb {
border-radius: 3px;
}
/* after */
::-ms-thumb {
border-radius: 3px;
}
false
Processes prefixed ::range-type pseudo-classes.
/* before */ ::-ms-thumb { border-radius: 3px; } /* after */ ::-moz-range-thumb { border-radius: 3px; } ::-ms-thumb { border-radius: 3px; } ::-webkit-slider-thumb { border-radius: 3px; } Usage
Add Input Range to your build tool:
npm install postcss postcss-input-range --save-dev Node
Use Input Range to process your CSS:
require('postcss-input-range').process(YOUR_CSS); PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use Input Range as a plugin:
postcss([ require('postcss-input-range')() ]).process(YOUR_CSS); Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use Input Range in your Gulpfile:
var postcss = require('gulp-postcss'); gulp.task('css', function () { return gulp.src('./src/*.css').pipe( postcss([ require('postcss-input-range')() ]) ).pipe( gulp.dest('.') ); }); Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use Input Range in your Gruntfile:
grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ postcss: { options: { use: [ require('postcss-input-range')() ] }, dist: { src: '*.css' } } });
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
