https://github.com/chbappy-cse/dropdown-search-checkbox-javascript
A custom multi-select dropdown with search and "Select All" functionality. Built with HTML, CSS, and JavaScript. Fully responsive and easy to use.
https://github.com/chbappy-cse/dropdown-search-checkbox-javascript
checkbox-selection css3 html5 javascript search-select select select-multiple
Last synced: 13 days ago
JSON representation
A custom multi-select dropdown with search and "Select All" functionality. Built with HTML, CSS, and JavaScript. Fully responsive and easy to use.
- Host: GitHub
- URL: https://github.com/chbappy-cse/dropdown-search-checkbox-javascript
- Owner: chbappy-cse
- Created: 2025-03-19T07:08:35.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-03-19T16:19:24.000Z (11 months ago)
- Last Synced: 2025-06-18T04:38:38.007Z (8 months ago)
- Topics: checkbox-selection, css3, html5, javascript, search-select, select, select-multiple
- Language: HTML
- Homepage: https://chbappy-cse.github.io/dropdown-search-checkbox-javascript/
- Size: 27.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dropdown with Search and Checkboxes
A simple and customizable dropdown menu with a built-in search bar and checkboxes for multiple selections.
## Features
- 🔍 **Searchable**: Quickly filter items by typing in the search box.
- ✅ **Multi-Select**: Select multiple items using checkboxes.
- 📌 **Click Anywhere**: Click on the item text or checkbox to toggle selection.
- 🎨 **Customizable**: Easy to modify styles and functionality.
## Demo
\
*Example of the dropdown in action.*
## Installation
1. **Clone the repository**
```sh
git clone https://github.com/your-username/dropdown-search-checkbox.git
cd dropdown-search-checkbox
```
2. **Open **``** in a browser**
```sh
open index.html
```
## Usage
Include the following HTML structure in your project:
```html
Select Continent/Region
Apple
Banana
Cherry
```
## Customization
### Change Dropdown Width
Modify the `.selectDropdown` CSS class:
```css
.selectDropdown {
width: 300px; /* Change to desired width */
}
```
### Update Colors
Change border and hover colors in `.selectDropdownItem:hover`:
```css
.selectDropdownItem:hover {
background: rgba(47, 139, 138, 0.1);
color: #2F8B8A;
}
```
## JavaScript Functionality
- **Toggle Dropdown**: Opens/closes dropdown on click.
- **Search Filter**: Filters items based on search input.
- **Checkbox Toggle**: Click anywhere on the item to toggle selection.
- **Close on Outside Click**: Automatically closes the dropdown when clicking outside.
## Contributing
1. Fork the repository.
2. Create a new branch (`feature-new-feature`).
3. Commit your changes (`git commit -m 'Add new feature'`).
4. Push to the branch (`git push origin feature-new-feature`).
5. Open a Pull Request.
## License
This project is licensed under the MIT License.
---
Made with ❤️ by [Ch Bappy](https://github.com/chbappy-cse)