{"id":15099438,"url":"https://github.com/avcat/custom-select","last_synced_at":"2026-01-27T12:01:56.403Z","repository":{"id":234558983,"uuid":"789142556","full_name":"avcat/custom-select","owner":"avcat","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-07T21:28:09.000Z","size":90,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T10:47:45.231Z","etag":null,"topics":["custom-select","select","web-component"],"latest_commit_sha":null,"homepage":"https://avcat.github.io/custom-select/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avcat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-19T19:35:01.000Z","updated_at":"2024-11-07T21:28:12.000Z","dependencies_parsed_at":"2024-04-26T22:22:27.428Z","dependency_job_id":"89e5d9f9-2c6a-416f-86c3-c46b2983f1fc","html_url":"https://github.com/avcat/custom-select","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":0.3939393939393939,"last_synced_commit":"a6be8d309c99820e3d9c8e3881f5d60fb14b0543"},"previous_names":["avcat/custom-select"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avcat%2Fcustom-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avcat%2Fcustom-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avcat%2Fcustom-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avcat%2Fcustom-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avcat","download_url":"https://codeload.github.com/avcat/custom-select/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248974646,"owners_count":21192186,"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","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":["custom-select","select","web-component"],"created_at":"2024-09-25T17:20:40.533Z","updated_at":"2026-01-27T12:01:51.355Z","avatar_url":"https://github.com/avcat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003ccode\u003e\u0026lt;custom-select\u0026gt;\u003c/code\u003e\r\n\r\n# Add to project\r\n\r\n## As ES6 module from local file ([download](https://github.com/avcat/custom-select/blob/main/custom-select.js))\r\n```JS\r\nimport 'custom-select.js';\r\n```\r\n\r\n## As ES6 module from CDN\r\n```JS\r\nimport 'https://cdn.jsdelivr.net/gh/avcat/custom-select/custom-select.min.js';\r\n```\r\n\r\n## As external file from CDN\r\n```HTML\r\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/avcat/custom-select/custom-select.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n# Use\r\n\r\n## HTML\r\n\r\nReplace `\u003cselect\u003e` HTML elements with `\u003ccustom-select\u003e`:\r\n```HTML\r\n\u003c!-- Before --\u003e\r\n\u003cselect name=\"...\" placeholder=\"...\"\u003e\r\n  \u003coption value=\"...\" selected\u003e...\u003c/option\u003e\r\n  \u003coption value=\"...\"\u003e...\u003c/option\u003e\r\n  \u003coption value=\"...\"\u003e...\u003c/option\u003e\r\n\u003c/select\u003e\r\n\r\n\u003c!-- After --\u003e\r\n\u003ccustom-select name=\"...\" placeholder=\"...\"\u003e\r\n  \u003coption value=\"...\" selected\u003e...\u003c/option\u003e\r\n  \u003coption value=\"...\"\u003e...\u003c/option\u003e\r\n  \u003coption value=\"...\"\u003e...\u003c/option\u003e\r\n\u003c/custom-select\u003e\r\n```\r\n\r\n\u003ctable\u003e\r\n  \u003ctr\u003e\r\n    \u003cth\u003e\r\n      Property\r\n    \u003c/th\u003e\r\n    \u003cth\u003e\r\n      Definition\r\n    \u003c/th\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\r\n      \u003ccode\u003ename\u003c/code\u003e\r\n    \u003c/td\u003e\r\n    \u003ctd\u003e\r\n      Is utilized by form.\r\n    \u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\r\n      \u003ccode\u003eplaceholder\u003c/code\u003e\r\n    \u003c/td\u003e\r\n    \u003ctd\u003e\r\n      Defines initial text of the select. Will be used, if there is no HTML element \u003ccode\u003eoption\u003c/code\u003e with property \u003ccode\u003eselected\u003c/code\u003e.\r\n    \u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\r\n      \u003ccode\u003eselected\u003c/code\u003e\r\n    \u003c/td\u003e\r\n    \u003ctd\u003e\r\n      Defines initial value of the \u003ccode\u003eCustomSelect\u003c/code\u003e.\r\n    \u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n\r\n## JS\r\n\r\n### Use public methods\r\n\r\n#### value (_getter_) =\u003e @returns {string}\r\n\r\nShows current selected value, `null` if no option is selected.\r\n\r\n```JS\r\nconst customSelect = document.querySelector('custom-select');\r\nconsole.log(customSelect.value); // '42'\r\n```\r\n\r\n#### value (_setter_) {number|string}\r\n\r\nSet an option with that value as selected. Numbers are treated as strings.\r\n\r\n```JS\r\nconst customSelect = document.querySelector('custom-select');\r\ncustomSelect.value = 42;\r\nconsole.log(customSelect.value); // '42'\r\n```\r\n\r\n#### opened (_getter_) =\u003e @returns {boolean}\r\nGets the `opened` state of the `CustomSelect` component.\r\n\r\n```JS\r\nconst customSelect = document.querySelector('custom-select');\r\nconsole.log(customSelect.opened); // false\r\n```\r\n\r\n#### opened (_setter_) {boolean}\r\nSets the `opened` state of the `CustomSelect` component.\r\n\r\n```JS\r\nconst customSelect = document.querySelector('custom-select');\r\ncustomSelect.opened = true;\r\nconsole.log(customSelect.opened); // true\r\n```\r\n\r\n#### toggle\r\nToggle the `opened` state of the `CustomSelect` component.\r\n\r\n```JS\r\nconst customSelect = document.querySelector('custom-select');\r\ncustomSelect.toggle();\r\nconsole.log(customSelect.opened); // true\r\ncustomSelect.toggle();\r\nconsole.log(customSelect.opened); // false\r\n```\r\n\r\n#### checkValidity\r\nChecks if element is considered valid.\r\n`CustomSelect` is invalid, if it has the `required` attribute, but does bot have a value.\r\n\r\n```JS\r\nconst customSelect = document.querySelector('custom-select');\r\nconsole.log(customSelect.checkValidity()); // false\r\n```\r\n\r\n### Subscribe to events\r\n\r\n`CustomSelect` emits its own `change` event, but you can add more custom events.\r\n\r\n```JS\r\nconst customSelect = document.querySelector('custom-select');\r\ncustomSelect.addEventListener('change', e =\u003e console.log('changed'));\r\n```\r\n\r\n### Give custom name\r\nThe `define()` static property can be used to define a custom name for the HTML tag for this Web Component. It is useful for avoiding possible name conflicts.\r\n\r\nThe default value is `custom-select`.\r\n\r\n```JS\r\nCustomSelect.define(); // Can be used as \u003ccustom-select\u003e\r\nCustomSelect.define('another-select'); // Can be used as \u003canother-select\u003e\r\n```\r\n\r\n## CSS\r\n\r\nCSS can be customized: either inside the source file or through CSS variables.\r\n\r\nTo be able to **affect a Web Component with external stylesheet**, we use `::part(part-name)` [syntax](https://webcomponents.guide/learn/components/styling/#parts-styling-a-shadow-tree-from-the-outside).\r\n\r\nSome CSS properties are still [**inherited**](https://webcomponents.guide/learn/components/styling/#inheritance) from the outside: `font-size`, `font-family`, `color`.\r\n\r\n```HTML\r\n\u003c!-- The resulting DOM nodes for the reference --\u003e\r\n\u003ccustom-select name=\"programming-language\" value=\"javascript\"\u003e\r\n  #shadow-root (open) ⤵\r\n    \u003cdiv part=\"base\"\u003eJavaScript\u003c/div\u003e\r\n    \u003cinput type=\"checkbox\" tabindex=\"-1\"\u003e\r\n    \u003cdiv part=\"options-wrapper\"\u003e\r\n      \u003cul part=\"options\"\u003e\r\n        \u003cli part=\"option\" value=\"javascript\" selected=\"\"\u003eJavaScript\u003c/li\u003e\r\n        \u003cli part=\"option\" value=\"python\"\u003ePython\u003c/li\u003e\r\n        \u003cli part=\"option\" value=\"java\"\u003eJava\u003c/li\u003e\r\n      \u003c/ul\u003e\r\n    \u003c/div\u003e\r\n  #(end shadow-root) ⤶\r\n\u003c/custom-select\u003e\r\n```\r\n\r\n### Sizes\r\n```CSS\r\n--select-border-radius: 0;\r\n--base-min-height: 2.5em;\r\n--base-padding-inline: 0.5em;\r\n--base-icon-width: 1em;\r\n--base-border-width: 0.1em;\r\n--base-font-size: 1em;\r\n--options-padding-block: 0;\r\n--options-font-size: 1em;\r\n--options-max-display-items: 5;\r\n--option-padding-block: 0.5em;\r\n```\r\n\r\n### Colors\r\n```CSS\r\n--base-border-color: black;\r\n--base-border-color-hover: lightblue;\r\n--base-background-color-hover: white;\r\n--base-border-color-opened: lightblue;\r\n--base-background-color-opened: white;\r\n--base-color-opened: black;\r\n--option-background-color-hover: lightblue;\r\n```\r\n\r\n### Other\r\n```CSS\r\n--transition-duration: 0.3s;\r\n--transition-timing-function: ease;\r\n--arrow-icon: url('data:image/svg+xml, \u0026lt;svg fill=\"none\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\u003e\u003cpath d=\"M6 9l6 6 6-6\"/\u003e\u003c/svg\u0026gt;');\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favcat%2Fcustom-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favcat%2Fcustom-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favcat%2Fcustom-select/lists"}