Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

jquery.cssselect

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jquery.cssselect

Keyboard-aware custom <select> dropdown boxes without inline styles. UMD-compatible – for your <script> tag with jQuery on the page, AMD module loader, or CommonJS.

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Build Status

cssSelect

Keyboard-aware custom <select> dropdown boxes without inline styles. UMD-compatible – for your <script> tag with jQuery on the page, AMD module loader, or CommonJS.

Keep your dropdown styling in the stylesheet(s).

Introduction

cssSelect takes an existing <select> as its argument and generates the following markup by default:

<div class="select name-{original-select-name}">
  <a class="selected" data-option-value="{selected option value}">
    <span class="text">{selected option text}</span>
    <span class="handle"></span>
  </a>
  <ul>
    <li data-option-value="{original first option value}">{original first option text}</li>
    <li data-option-value="{original second option value}" class="selected">{original second option text}</li>
    <li data-option-value="{original third option value}">{original third option text}</li>
  </ul>
</div>

The example above shows the second of three options being selected, hence the class selected on the second item in the list.

This markup is placed adjacent to the original <select> in the DOM tree. The original <select> is also given the class hidden.

It's probably ideal to place the select off-screen at this point with some CSS, e.g.:

.hidden {
  text-indent: -999em;
}

You'll also want to style the new .select on the page - cssSelect's philosophy is that it should not add any inline-styling to elements on the page. all of that stuff should stay in stylesheet(s) so that it's easy to modify and override.

Usage

cssSelect can be used as a jQuery plugin:

$('select#customizable-select').cssSelect();

If you're using some kind of module-loader, it is also exposed as a standalone function:

var cssSelect = require('jquery.cssselect');
cssSelect('select#customizable-select');

CommonJS-style module loader pictured above, but the same should work for an AMD-style loader.

Using a module loader allows you to hide the jQuery dependency, so your module that depends on cssSelect will be able to operate without declaring jquery as a dependency in that module.

Contributing

Write issues/submit pull requests. I'm very interested in issues that people may have and making this as good as it can possibly be.

If you're submitting pull requests, make sure you run/update/add tests: npm test

npm install beforehand to get the project's development dependencies.

Keywords

FAQs

Package last updated on 17 Apr 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc