https://github.com/jonesiscoding/xq-select
The xqSelect package is intended to make HTML5 form selects look and act the same cross browser and platform. A jQuery plugin, CSS and Bootstrap's dropdown.js are used to style and bring additional functionality to normal select boxes.
https://github.com/jonesiscoding/xq-select
Last synced: 3 months ago
JSON representation
The xqSelect package is intended to make HTML5 form selects look and act the same cross browser and platform. A jQuery plugin, CSS and Bootstrap's dropdown.js are used to style and bring additional functionality to normal select boxes.
- Host: GitHub
- URL: https://github.com/jonesiscoding/xq-select
- Owner: jonesiscoding
- License: mit
- Created: 2016-01-04T19:04:37.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-08-13T20:13:51.000Z (over 5 years ago)
- Last Synced: 2025-05-20T03:38:31.243Z (8 months ago)
- Language: CSS
- Homepage:
- Size: 239 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
xqSelect
=========
The xqSelect package is intended to make HTML5 form selects look and act the same cross browser and platform. A jQuery plugin, CSS and Bootstrap's dropdown.js are used to style and bring additional functionality to normal select boxes.
There are a great many excellent jQuery plugins that do similar things, and credit goes to these authors for the original idea.
xqSelect is differs similar plugins in a few small ways:
* Intentionally feature sparse to reduce size and complications.
* Under 8KB minified - 4KB if you're only using the CSS (see below).
* The original select box is still used, and is not hidden or moved of screen.
## Documentation
The documentation for xqSelect is a work in progress and will be updated as possible. For now, please see the basic demo and usage explanation below.
## Usage and Demo
A basic demo may be seen on [BootPly](http://www.bootply.com/tl9ZiekMCQ). A more complete demo should be available soon.
Usage is simple:
```
Item One
Item Two
Item Three
Item Four
Item Five
Item Six
Item Seven
Item Eight
```
This does, of course, presume that you have included the distribution JS and CSS somewhere in your HTML page. It's recommended that stylesheet go in the `````` and the JS goes just before your closing `````` tag.
To automatically switch to a native select with *most* mobile devices, include the attribute **data-mobile="true"** in the ```
``` tag.
## Browser Compatibility
One of my biggest goals for xqSelect is cross browser compatibility. Reports on issues with a specific browser and platform are encouraged. See below for guidelines.
As of this moment, it is expected that the following browsers are fully supported:
| Browser | Version | Platform | Status
| ------------- | ------------- | ------------- | ------------- |
| Chrome | ?* | Win/Mac/Linux | Supported |
| Firefox | ?* | Win/Mac/Linux | Supported |
| Opera | 15+ | Win/Mac/Linux | Supported |
| Safari | 6.2+ | Mac | Supported |
| Safari | iOS 8/9+ | iOS | CSS Only |
| Chrome | iOS 8/9+ | iOS | CSS Only |
| Chrome | Android 5.0+ | Android | CSS Only |
| Firefox | Android 5.0+ | Android | CSS Only |
| Internet Explorer | 8 | Win | Supported |
| Internet Explorer | 9/10 | Win | Supported |
| Internet Explorer | 11 | Win | Supported |
| Edge | All | Win | Supported |
The following browser are still expected to work:
| Browser | Version | Platform | Status
| ------------- | ------------- | ------------- | ------------- |
| Opera | 11/12 | Win/Mac/Linux | Needs Testing |
| Opera | 10 | Win/Mac/Linux | Unsupported |
| Safari | 5.1.4+ | Mac | Needs Testing |
| Safari | iOS 6.1 - 7 | iOS | Needs Testing** |
| Android Browser | Android 5.0+ | Android | Needs Testing** |
| Opera Mini | All | All | Needs Testing** |
| Internet Explorer | All | Windows Phone | Needs Testing** |
No intention is present to support IE7, Opera 10, Safari 4, or 'ancient' versions of self-updating browsers such as Firefox and Chrome.
Mobile browsers are marked as *CSS Only* because their native selects should be used whenever possible to ensure the best user experience. Ideally, CSS rules will still ensure that the `````` looks uniform across browsers, but when clicked the native select will take over. See [usage](#usage-and-demo) above for how to make this happen.
For additional browser compatibility, see [jQuery Browser Support](https://jquery.com/browser-support/) and [Bootstrap Supported Browsers](http://getbootstrap.com/getting-started/#support-browsers)
\* Need to find the lowest version xqSelect works with.
\*\* Needs testing. Only CSS components are expected to work.
## Bugs and feature requests
Anyone is welcome to contribute. Please read the important information below regarding opening issues!
* [Bug reports](CONTRIBUTING.md#bug-reports)
* [Feature requests](CONTRIBUTING.md#feature-requests)
## Copyright and License
Copyright (C) 2014-2016 ExactQuery
Licensed under [the MIT license](LICENSE).