
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
jquery.cssselect
Advanced tools
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.
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).
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.
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.
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.
FAQs
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.
The npm package jquery.cssselect receives a total of 0 weekly downloads. As such, jquery.cssselect popularity was classified as not popular.
We found that jquery.cssselect demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.