https://github.com/alterebro/auto-resize-custom-select

Auto resize drop-down select elements to match the width of the selected option and customize it with CSS
https://github.com/alterebro/auto-resize-custom-select

autoresize css custom customselect dropdown option select selector

Last synced: 13 days ago
JSON representation

Auto resize drop-down select elements to match the width of the selected option and customize it with CSS

• Host: GitHub
• URL: https://github.com/alterebro/auto-resize-custom-select
• Owner: alterebro
• License: mit
• Created: 2021-02-03T23:05:36.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-10T19:34:25.000Z (8 months ago)
• Last Synced: 2024-11-11T11:46:25.762Z (6 months ago)
• Topics: autoresize, css, custom, customselect, dropdown, option, select, selector
• Language: JavaScript
• Homepage: https://alterebro.github.io/auto-resize-custom-select/
• Size: 526 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# auto-resize-custom-select [#](https://alterebro.github.io/auto-resize-custom-select/) [![npm](https://img.shields.io/npm/v/auto-resize-custom-select.svg?label=&color=24292e)](https://github.com/alterebro/auto-resize-custom-select/releases/latest)

![Custom Select](https://alterebro.github.io/auto-resize-custom-select/custom-select-dark.png "customSelect")

[![MIT license](https://img.shields.io/github/license/alterebro/auto-resize-custom-select.svg)](https://github.com/alterebro/auto-resize-custom-select/blob/main/LICENSE) [![NPM Version](https://img.shields.io/npm/v/auto-resize-custom-select.svg)](https://www.npmjs.com/package/auto-resize-custom-select) [![File Size](https://img.shields.io/github/size/alterebro/auto-resize-custom-select/dist/customSelect.min.js.svg)](https://github.com/alterebro/auto-resize-custom-select/blob/main/dist/customSelect.min.js) [![Twitter](https://img.shields.io/twitter/follow/alterebro.svg)](https://twitter.com/alterebro)

> Auto-resize the width of a `select` element based on the size of the current selected `option`.

Fully customizable with CSS without the common styling limitations of a `select` element.

**customSelect**. Auto resizes drop-down `select` html elements to fit the size of the option that has been selected. It also gives you total freedom and control to style the list selector with CSS without the usual constraints on this form elements.

It creates a substitute `span` element with the `.custom-select` class, which contains two children `span` elements, with the selection value (`.selection`) and the expand figure (`.arrow`) that you can stylize as you wish.

```html



    value

    [::after]



```

## Install

```sh

$ npm i auto-resize-custom-select

```

Easiest way to install it is via **NPM** or including the minified file from the **unpkg** or **jsdelivr** CDNs.

```html

```

## Examples

Some examples can be seen on this CodePen: https://codepen.io/alterebro/full/RwopMYp

[![Custom Select Examples](https://alterebro.github.io/auto-resize-custom-select/custom-select-examples.png "Custom Select Examples")](https://codepen.io/alterebro/pen/RwopMYp)

## Usage

Just include it on your document and call the `customSelect` function. The script is available as ES5 minified file and as ES Module.

```html

    ...

    

        un

        deux

        trois

    

    ...

    

    

        customSelect();