{"id":13397179,"url":"https://github.com/filamentgroup/select-css","last_synced_at":"2025-09-27T07:30:24.589Z","repository":{"id":20817358,"uuid":"24103044","full_name":"filamentgroup/select-css","owner":"filamentgroup","description":"Cross-browser styles for consistent select element styling","archived":true,"fork":false,"pushed_at":"2022-10-20T20:44:45.000Z","size":77,"stargazers_count":1231,"open_issues_count":0,"forks_count":111,"subscribers_count":40,"default_branch":"master","last_synced_at":"2025-09-12T09:50:15.448Z","etag":null,"topics":["css","forms","html"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/filamentgroup.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-16T14:30:57.000Z","updated_at":"2025-07-04T11:03:39.000Z","dependencies_parsed_at":"2022-07-07T15:58:52.125Z","dependency_job_id":null,"html_url":"https://github.com/filamentgroup/select-css","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/filamentgroup/select-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filamentgroup%2Fselect-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filamentgroup%2Fselect-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filamentgroup%2Fselect-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filamentgroup%2Fselect-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filamentgroup","download_url":"https://codeload.github.com/filamentgroup/select-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filamentgroup%2Fselect-css/sbom","scorecard":{"id":399327,"data":{"date":"2025-08-11","repo":{"name":"github.com/filamentgroup/select-css","commit":"e5fa82f801573757739ddb2f28bcec40c801af3e"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.3,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":2,"reason":"Found 3/14 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 28 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-18T19:45:30.994Z","repository_id":20817358,"created_at":"2025-08-18T19:45:30.995Z","updated_at":"2025-08-18T19:45:30.995Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275895527,"owners_count":25547971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-19T02:00:09.700Z","response_time":108,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","forms","html"],"created_at":"2024-07-30T18:01:12.216Z","updated_at":"2025-09-27T07:30:24.236Z","avatar_url":"https://github.com/filamentgroup.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":":warning: This project is archived and the repository is no longer maintained. \n\nselect-css\n==========\n\n\nCross-browser select element CSS for consistent select element styling.\n\nArticle: https://www.filamentgroup.com/lab/select-css.html\n\n\n\n---\n\nDemo page: [http://filamentgroup.github.io/select-css/demo/](http://filamentgroup.github.io/select-css/demo/)\n\nDownload: [select-css.css](https://github.com/filamentgroup/select-css/blob/master/src/select-css.css)\n\nAvailable [on npm](https://www.npmjs.com/package/fg-select-css): `npm install fg-select-css`\n\n---\n\n## Usage\n\nInclude the following file:\n\n* [`src/select-css.css`](src/select-css.css): main component code\n\nIts CSS will style any select with a class of `select-css`\n\n### Notes on the CSS\n\nThe 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.\n\n- 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`.\n- 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.\n- 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.**\n- The `appearance` rule and its and prefixed versions are important to unset some default browser `select` styling.\n- 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.\n- The `.select-css option` keeps `option` elements from inheriting the bold font weight of the `select` button itself.\n- 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. ) \n- 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.\n\n\n#### For Posterity:\n* [v1](https://github.com/filamentgroup/select-css/tree/v1)\n* [v9: February 26, 2016](http://output.jsbin.com/wurazow)\n* [v8: September 18, 2015](http://output.jsbin.com/yaruh)\n\nIf you’re looking for a custom select that uses JavaScript for additional features, check out [`select`](https://github.com/filamentgroup/select).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilamentgroup%2Fselect-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilamentgroup%2Fselect-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilamentgroup%2Fselect-css/lists"}