filamentgroup / Select Css
Licence: mit
Cross-browser styles for consistent select element styling
Stars: ✭ 1,242
Projects that are alternatives of or similar to Select Css
Express Fileupload
Simple express file upload middleware that wraps around busboy
Stars: ✭ 1,069 (-13.93%)
Mutual labels: forms
Mform
Spielend einfach umfangreiche Modul-Input-Formulare erzeugen.
Stars: ✭ 65 (-94.77%)
Mutual labels: forms
Laravel Multistep Forms
Responsable Multistep Form Builder for Laravel
Stars: ✭ 76 (-93.88%)
Mutual labels: forms
Rff Cli Example
An example of how to use 🏁 React Final Form in a CLI application with Ink
Stars: ✭ 55 (-95.57%)
Mutual labels: forms
Formio.js
JavaScript powered Forms with JSON Form Builder
Stars: ✭ 1,060 (-14.65%)
Mutual labels: forms
Autosize Input
🎈 Effortless, dynamic-width text boxes in vanilla JavaScript
Stars: ✭ 64 (-94.85%)
Mutual labels: forms
Google Forms Html Exporter
Build a standard HTML <form> using any Google Forms
Stars: ✭ 74 (-94.04%)
Mutual labels: forms
Form Object
Form object to use with Vue components for sending data to a Laravel application using axios.
Stars: ✭ 73 (-94.12%)
Mutual labels: forms
Boltforms
Bolt Forms extension - Symfony interface and API for Bolt
Stars: ✭ 53 (-95.73%)
Mutual labels: forms
Wtforms
A flexible forms validation and rendering library for Python.
Stars: ✭ 1,214 (-2.25%)
Mutual labels: forms
Ohmyform
✏️ Free open source alternative to TypeForm, TellForm, or Google Forms ⛺
Stars: ✭ 1,065 (-14.25%)
Mutual labels: forms
Ng Dynamic Forms
Rapid form development library for Angular
Stars: ✭ 1,146 (-7.73%)
Mutual labels: forms
React Inform
Simple controlled forms with validations in react
Stars: ✭ 81 (-93.48%)
Mutual labels: forms
Normform
Normform: A tiny CSS plugin to make your web forms beautiful again
Stars: ✭ 78 (-93.72%)
Mutual labels: forms
Bind Query Params
Sync URL Query Params with Angular Form Controls
Stars: ✭ 73 (-94.12%)
Mutual labels: forms
select-css
Cross-browser select element CSS for consistent select element styling.
Article: https://www.filamentgroup.com/lab/select-css.html
Demo page: http://filamentgroup.github.io/select-css/demo/
Download: select-css.css
Available on npm: npm install fg-select-css
Usage
Include the following file:
-
src/select-css.css
: main component code
Its CSS will style any select with a class of select-css
Notes on the CSS
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.
- The
select
is set todisplay: block
by default but you can style itdisplay: inline-block; width: auto;
if you'd like it to sit alongside alabel
. - 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 laterbackground-size: .65em auto, 100%;
property. And its position is set viabackground-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 theselect
'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. - 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.
- The
appearance
rule and its and prefixed versions are important to unset some default browserselect
styling. - The
font-size: 16px;
rule is important because iOS Safari will zoom-in the site layout if theselect
's text is less than 16px. Generally, this behavior is annoying so we try to avoid it with a 16px font size onselect
s. - The
.select-css option
keepsoption
elements from inheriting the bold font weight of theselect
button itself. - As noted in Scott O'Hara's article, setting background color on the
select
(though not background image as I've used here, can causeoption
elements to inherit background colors as well, which can cause problems. So avoid doing that. ) - 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.
For Posterity:
If you’re looking for a custom select that uses JavaScript for additional features, check out select
.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].