https://github.com/genebit/pckg-custom-select
A free customizable select UI
https://github.com/genebit/pckg-custom-select
Last synced: 11 months ago
JSON representation
A free customizable select UI
- Host: GitHub
- URL: https://github.com/genebit/pckg-custom-select
- Owner: genebit
- License: mit
- Archived: true
- Created: 2022-10-14T15:28:24.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-10-31T08:42:32.000Z (over 3 years ago)
- Last Synced: 2024-11-25T00:13:34.197Z (over 1 year ago)
- Language: HTML
- Size: 30.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **Custom Select**
A jquery form design plugin that customizes form inputs such as:
- input (floating labels)
- select (single/multiple)
## **How to use**
Import the files to your html header
```html
```
### **Single Select Input**
Syntax for using custom select. In here you can modify:
- Caret icon
- Search icon
- Remove search container and not have search functionality
**NOTE:**
- It is important to use the custom tagnames for it to be recognized in the script
- A value is required
```html
...
```
### **Floating Dropdown**
- Simply add the class `float` to the `` tag
```html
...
```
### **Custom Form Inputs**
Use the class `cform-input` to `input` type elements. Labels here are not required
```html
Birth Day
```
For **floating labels only**, wrap them in a div with a class `floating-cform-label`.
Note that `` is required.
```html
```
For **floating labels on input type fields**, wrap them in a div with a class `floating-cform-input`.
Note that `` is required.
```html
Full Name
```
### **Eventlisteners**
To get the value of the single select input. It is required to put the `setTimeout()` function.
```js
// sample onchange event on cselect
$(`#SingleSelectExample1`).change(function () {
setTimeout(() => {
console.log($(this).attr("value"));
}, 100);
});
```