├── LICENSE ├── README.md ├── artifacts ├── a-grade.png └── b-grade.png ├── demo ├── demo.css └── index.html ├── package.json └── src └── select-css.css /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Filament Group 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: This project is archived and the repository is no longer maintained. 2 | 3 | select-css 4 | ========== 5 | 6 | 7 | Cross-browser select element CSS for consistent select element styling. 8 | 9 | Article: https://www.filamentgroup.com/lab/select-css.html 10 | 11 | 12 | 13 | --- 14 | 15 | Demo page: [http://filamentgroup.github.io/select-css/demo/](http://filamentgroup.github.io/select-css/demo/) 16 | 17 | Download: [select-css.css](https://github.com/filamentgroup/select-css/blob/master/src/select-css.css) 18 | 19 | Available [on npm](https://www.npmjs.com/package/fg-select-css): `npm install fg-select-css` 20 | 21 | --- 22 | 23 | ## Usage 24 | 25 | Include the following file: 26 | 27 | * [`src/select-css.css`](src/select-css.css): main component code 28 | 29 | Its CSS will style any select with a class of `select-css` 30 | 31 | ### Notes on the CSS 32 | 33 | The CSS for this is fine to use as-is, but if you're editing it at all, you might want to be aware of a few numbers and values that help it look right. 34 | 35 | - The `select` is set to `display: block` by default but you can style it `display: inline-block; width: auto;` if you'd like it to sit alongside a `label`. 36 | - The background of the `select` is created using two background images: the first is an svg arrow icon (expressed inline as a data URI) and the second is a repeating linear gradient. Either URL could be an external image if you'd like. If you change the icon image, be aware that its size is set in the first section of the later `background-size: .65em auto, 100%;` property. And its position is set via `background-position: right .7em top 50%, 0 0;` (which is `.7em` from the right side, respectively). Also, if the size changes, you might want to make more right padding on the button so that it doesn't overlap the `select`'s text, but be aware that in IE9 and older, the custom arrow will not appear, and the browser's default arrow will show to the left of the padding, so don't add too much there or IE9's arrow will be inset really far. 37 | - The linear gradient background is important to keep, because its presence actually prevents IE9 and older from recognizing the background property, and as a result it won't show the custom icon alongside its unhideable native one. **If you want a flat color, use a linear gradient between two of the same color values.** 38 | - The `appearance` rule and its and prefixed versions are important to unset some default browser `select` styling. 39 | - The `font-size: 16px;` rule is important because iOS Safari will zoom-in the site layout if the `select`'s text is less than 16px. Generally, this behavior is annoying so we try to avoid it with a 16px font size on `select`s. 40 | - The `.select-css option` keeps `option` elements from inheriting the bold font weight of the `select` button itself. 41 | - As noted in [Scott O'Hara's article](https://scottaohara.github.io/a11y_styled_form_controls/src/select/), setting background color on the `select` (though not background *image* as I've used here, can cause `option` elements to inherit background colors as well, which can cause problems. So avoid doing that. ) 42 | - The `.select-css::-ms-expand` rule instructs IE11 and IE10 to hide the menu icon pseudo element, so the custom icon behind it can appear. Thanks for the tip, Jelmer de Maat. 43 | 44 | 45 | #### For Posterity: 46 | * [v1](https://github.com/filamentgroup/select-css/tree/v1) 47 | * [v9: February 26, 2016](http://output.jsbin.com/wurazow) 48 | * [v8: September 18, 2015](http://output.jsbin.com/yaruh) 49 | 50 | If you’re looking for a custom select that uses JavaScript for additional features, check out [`select`](https://github.com/filamentgroup/select). 51 | -------------------------------------------------------------------------------- /artifacts/a-grade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/select-css/e5fa82f801573757739ddb2f28bcec40c801af3e/artifacts/a-grade.png -------------------------------------------------------------------------------- /artifacts/b-grade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/select-css/e5fa82f801573757739ddb2f28bcec40c801af3e/artifacts/b-grade.png -------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | /* Some basic page styles */ 2 | body { 3 | background-color: #fff; 4 | font-family: sans-serif; 5 | margin: 4% 10%; 6 | } 7 | 8 | /* Label styles: style as needed */ 9 | label { 10 | display:block; 11 | margin-top:2em; 12 | font-size: 0.9em; 13 | color:#777; 14 | } 15 | .select-css { 16 | margin: .5em 0; 17 | } 18 | 19 | .dark-wrapper { 20 | margin-top: 2em; 21 | padding: 1em 1em 1em; 22 | background: #444; 23 | } 24 | 25 | .dark-wrapper label { 26 | margin-top: 0; 27 | color: #ccc; 28 | } 29 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Select styles with CSS only 5 | 6 | 7 | 8 | 9 | 10 | 11 |

CSS-only custom-styled selects

12 | 13 |

Filament Group Inc.

14 | 15 |

This is a demo page for the select-css plugin.

16 | 17 | 18 | 25 | 26 | 27 | 28 | 35 | 36 | 37 |
38 | 39 | 46 |
47 | 48 | 49 | 56 | 57 | 60 | 61 | 62 |
63 | 64 | 71 |
72 | 73 |

74 | Note: in Firefox, using gradients on the <select> background 75 | without a solid fallback color can make the option list unreadable. 76 | See pull request #14 77 | for details. 78 |

79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fg-select-css", 3 | "version": "3.2.0", 4 | "description": "Cross-browser CSS for consistent select element styling.", 5 | "scripts": { 6 | }, 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/filamentgroup/select-css.git" 10 | }, 11 | "authors": "zachleat (http://zachleat.com/), @scottjehl", 12 | "license": "MIT", 13 | "bugs": { 14 | "url": "https://github.com/filamentgroup/select-css/issues" 15 | }, 16 | "homepage": "https://github.com/filamentgroup/select-css#readme" 17 | } 18 | -------------------------------------------------------------------------------- /src/select-css.css: -------------------------------------------------------------------------------- 1 | /* class applies to select element itself, not a wrapper element */ 2 | .select-css { 3 | display: block; 4 | font-size: 16px; 5 | font-family: sans-serif; 6 | font-weight: 700; 7 | color: #444; 8 | line-height: 1.3; 9 | padding: .6em 1.4em .5em .8em; 10 | width: 100%; 11 | max-width: 100%; /* useful when width is set to anything other than 100% */ 12 | box-sizing: border-box; 13 | margin: 0; 14 | border: 1px solid #aaa; 15 | box-shadow: 0 1px 0 1px rgba(0,0,0,.04); 16 | border-radius: .5em; 17 | -moz-appearance: none; 18 | -webkit-appearance: none; 19 | appearance: none; 20 | background-color: #fff; 21 | /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 22 | for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference 23 | 24 | */ 25 | background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), 26 | linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); 27 | background-repeat: no-repeat, repeat; 28 | /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ 29 | background-position: right .7em top 50%, 0 0; 30 | /* icon size, then gradient */ 31 | background-size: .65em auto, 100%; 32 | } 33 | /* Hide arrow icon in IE browsers */ 34 | .select-css::-ms-expand { 35 | display: none; 36 | } 37 | /* Hover style */ 38 | .select-css:hover { 39 | border-color: #888; 40 | } 41 | /* Focus style */ 42 | .select-css:focus { 43 | border-color: #aaa; 44 | /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */ 45 | box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); 46 | box-shadow: 0 0 0 3px -moz-mac-focusring; 47 | color: #222; 48 | outline: none; 49 | } 50 | 51 | /* Set options to normal weight */ 52 | .select-css option { 53 | font-weight:normal; 54 | } 55 | 56 | /* Support for rtl text, explicit support for Arabic and Hebrew */ 57 | *[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css { 58 | background-position: left .7em top 50%, 0 0; 59 | padding: .6em .8em .5em 1.4em; 60 | } 61 | 62 | /* Disabled styles */ 63 | .select-css:disabled, .select-css[aria-disabled=true] { 64 | color: graytext; 65 | background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), 66 | linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); 67 | } 68 | 69 | .select-css:disabled:hover, .select-css[aria-disabled=true] { 70 | border-color: #aaa; 71 | } 72 | --------------------------------------------------------------------------------