postcss-input-style

Adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-input-style
1651.0.07 years ago9 years agoMinified + gzip package size for postcss-input-style in KB

Readme

PostCSS Input Style
!NPM versionnpm-badgenpm-url !Build Statustravis-badgetravis-url !Dependency Statusdaviddm-badgedaviddm-url
PostCSSPostCSS plugin that adds new pseudo elements to inputs for easy cross-browser styling of their inner elements. Currently the only input supported is Range, more will be added as more vendor-specific pseudo selectors are made available.
Part of Rucksack - CSS Superpowers
Input
input[type="range"]::track {
  background: #9d9d9d;
  height: 3px;
}

input[type="range"]::thumb {
  background: #4286be;
  width: 16px;
  height: 8px;
}

Output
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: #9d9d9d;
  height: 3px;
}

input[type="range"]::-moz-range-track  {
  -moz-appearance: none;
  background: #9d9d9d;
  height: 3px;
}

input[type="range"]::-ms-track  {
  background: #9d9d9d;
  height: 3px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #4286be;
  width: 16px;
  height: 8px;
}

input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  background: #4286be;
  width: 16px;
  height: 8px;
}

input[type="range"]::-ms-thumb {
  background: #4286be;
  width: 16px;
  height: 8px;
}

input[type="range"] {
  -webkit-appearance: none;
}

input[type=range]::-moz-focus-outer {
    border: 0;
}

Notes on output:
  • Selectors are not grouped because if a browser finds a single selector it doesn't understand in a group, the whole group is ignored (see Selectors Level 3selectors)

  • -[vendor]-appearance: none; is added so your custom styles apply. On Chrome and Safari this means you must style both ::track and ::thumb, since the appearance must be set on the root element as well

  • The additional ::-moz-focus-outer rule removes the inconsistent dotted focus outline on firefox.

Usage

postcss([ require('postcss-input-style') ])

See PostCSS
PostCSS docs for examples for your environment.

MIT © Sean King