{"_id":"datalist-css","_rev":"1-096473a5d281b8cc50be6ae38084750c","name":"datalist-css","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"datalist-css","version":"1.0.0","description":"Style HTML5 datalist elements using standard CSS","type":"module","browser":"./dist/datalist-css.min.js","scripts":{"build":"rollup --config --environment NODE_ENV:production"},"repository":{"type":"git","url":"git+https://github.com/craigbuckler/datalist-css.git"},"homepage":"https://github.com/craigbuckler/datalist-css#readme","bugs":{"url":"https://github.com/craigbuckler/datalist-css/issues"},"keywords":["HTML5","CSS","datalist","autocomplete","style"],"author":{"name":"Craig Buckler"},"license":"MIT","gitHead":"fe23e7b53e1e07c32274117a1f20e7c2c934c530","_id":"datalist-css@1.0.0","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-C3Hni6Y4iBZRNO2S6JJCdZMqeZlV7z7uoEAzZHmvixTjrHWmecVAv2celcAJjM2EBRyvDk7Ep7IVaU7czHC/vw==","shasum":"052a5d00f6489be2aac420cc050d2afabbbc7cd3","tarball":"https://registry.npmjs.org/datalist-css/-/datalist-css-1.0.0.tgz","fileCount":5,"unpackedSize":9791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDFJJCRA9TVsSAnZWagAArLMP/25bLf0LPJxuRcuJoH36\nYNeh0hluqZUp0qYAEmNm17j85LtwcnN2GeEZJtEu1wTfO6Fh8xFIVwAgb3Ud\nxLrO8EcSVAqyh7UC8KR18n9EIbJv4599KVT+SN/TtbpsVPXdqABsS5pT4mL4\nZbydYIQTZeXAMXKo/RT8NkEF5/EYXc2N0/D5/GDipKVMxkCwXRvCK74IIU3n\nbhori84ZE+WfhZQMc5m+Hm+H4+pG+UGDL5VUyOXp6h6H4wC//on9ApwUOB1I\nC17QsH09Mqe3ZSogkYezSfK2SiQDt4E6+ZyvOn7cY/NwEA/Y4iMWWtNgn5U1\nX/LyNVSMA2v+NbmGE4OZxhlnIK9RX5s29ziYmiXfRzTrBIZmIKvVO+RrRH++\nVSqThRPwyF3zFImCDaXFIQxCfRIpPNovY1zoBrUi4uUZsRaXZ235uELbwLJj\nVCI02xFCABNdw17S9fl6dAcaNqtggZQIv4nWgjZtrKZOzbmgoGBYMGgd8/cP\n0fWmE3hwrbSDwm3Kb/tH5bg0xEUi4cqla/N3vXe3C6jpsG7G4KPqdJx1ZXc7\nTshiHQaosWD4mtApaMZJHwHZnL2dGeVrnMGbkMa4YaY3c6BMi26DJwtmsnax\n2CZ17GddtCjdXDAppoIvJYI1l81Wg5QHVsEAAHGKYA6nvQlq+o8BRorqZCU0\nLU1B\r\n=lCA6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPRwaryaKwNSNlItve34H5/ihanfszMxFdJP/VSUhnzAiBcWKL8oOyps8XkwMjEB0IlO8fQQdxzzyX/UE6X9PlRSw=="}]},"_npmUser":{"name":"craigbuckler","email":"craigbuckler@gmail.com"},"directories":{},"maintainers":[{"name":"craigbuckler","email":"craigbuckler@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/datalist-css_1.0.0_1611420233400_0.5624848774663933"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-23T16:43:53.400Z","1.0.0":"2021-01-23T16:43:53.535Z","modified":"2022-04-28T05:14:01.370Z"},"maintainers":[{"name":"craigbuckler","email":"craigbuckler@gmail.com"}],"description":"Style HTML5 datalist elements using standard CSS","homepage":"https://github.com/craigbuckler/datalist-css#readme","keywords":["HTML5","CSS","datalist","autocomplete","style"],"repository":{"type":"git","url":"git+https://github.com/craigbuckler/datalist-css.git"},"author":{"name":"Craig Buckler"},"bugs":{"url":"https://github.com/craigbuckler/datalist-css/issues"},"license":"MIT","readme":"# datalist-css: HTML5 datalist CSS styling\n\nThis JavaScript module allows you to style HTML5 `<datalist>` and child `<option>` elements using standard CSS. Load `demo.html` to view the demonstration page.\n\nHTML5 `<datalist>` elements cannot be styled. To achieve it, this 1.5Kb script overrides the browser's default behavior; *the `<datalist>` effectively becomes a `<div>`*. It's little different to using a JavaScript-based autocomplete control since all display and input handling must be managed manually.\n\nThis script was primarily written for demonstration purposes and it's probably best avoided!...\n\n1. You lose the benefits and accessibility of a standard lightweight HTML5 `<datalist>`.\n1. There are better JavaScript autocomplete options available.\n\n\n## Usage\n\nLoad the script anywhere in your HTML page as an ES6 module:\n\n```html\n<script type=\"module\" src=\"./dist/datalist-css.min.js\"></script>\n```\n\nor using the CDN:\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/datalist-css/dist/datalist-css.min.js\"></script>\n```\n\nCreate a standard text `<input>` immediately followed by a `<datalist>` containing one or more `<option>` elements, e.g.\n\n```html\n<label for=\"browser\">browser:</label>\n\n<input list=\"browserdata\" id=\"browser\" name=\"browser\" size=\"50\" autocomplete=\"off\" />\n\n<datalist id=\"browserdata\">\n  <option>Brave</option>\n  <option>Chrome</option>\n  <option>Edge</option>\n  <option>Firefox</option>\n  <option>Internet Explorer</option>\n  <option>Opera</option>\n  <option>Safari</option>\n  <option>Vivaldi</option>\n  <option>other</option>\n</datalist>\n```\n\nNote:\n\n1. The input's `list` attribute must reference the `id` of the `<datalist>`.\n1. Use `autocomplete=\"off\"` to ensure the input does not show previously values entered by the user.\n1. Only the `<option>value</option>` format can be used (`<option value=\"value\" />` is an empty element which cannot be styled).\n\nAdd CSS to style all `<datalist>` and `<option>` elements, e.g.\n\n```css\ndatalist {\n  position: absolute;\n  max-height: 20em;\n  border: 0 none;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\ndatalist option {\n  font-size: 0.8em;\n  padding: 0.3em 1em;\n  background-color: #ccc;\n  cursor: pointer;\n}\n\n/* option active styles */\ndatalist option:hover, datalist option:focus {\n  color: #fff;\n  background-color: #036;\n  outline: 0 none;\n}\n```\n\n\n## Building\n\nThe minified script is built using [Rollup.js](https://rollupjs.org/) and [Terser](https://terser.org/). Install globally:\n\n```bash\nnpm install -g rollup rollup-plugin-terser\n```\n\nIf not done already, set `NODE_PATH` to the `npm` root folder so global modules can be used within any project directory, e.g.\n\n```bash\nexport NODE_PATH=$(npm root --quiet -g)\n```\n\nBuild using:\n\n```bash\nnpm run build\n```\n","readmeFilename":"README.md"}