sculptorjs
Advanced tools
Allows you to easily 'sculpt' beautiful, cross-browser HTML dropdowns with standard CSS
Sculptor JS allows you to easily 'sculpt' beautiful html dropdowns that look the same across all browsers with just CSS. The library is very lightweight and is intended to be a quick way for you to get custom styled dropdowns on a page. This is accomplished with the age old practice of creating custom html elements on top of existing native select controls and then feeding the user interaction back to those native elements.
It is not at this point in time intended as your go-to for cross-browser styling of all native html elements. It is not a jack of all trades and will only style drop-downs that it is specifically told to style.
Sculptor JS can be installed using NPM or by cloning the repository and including the compiled js file in your website.
First you have to install the tool itself (which comes bundled with pocket-dom)
npm install sculptorjs
// Just a closure
(function (w, doc) {
"use strict"
var myAgeSelector,
sculptor = require("sculptorjs"); // browserify require of sculptorjs
// On window load, get the select element that I would like to style and pass it into sculptor
w.onload = function () {
var myAgeSelector = doc.getElementById("age-selector");
sculptor.init([myAgeSelector]); // Notice that an array is required even for a single element - [myAgeSelector]
}
}(window, document));
First you have to clone the repo
git clone git@github.com:ordergroove/sculptorjs.git
After cloning, you can use the compiled sculptor.js file and CSS in your website like this
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<!-- Include Sculptor JS and Base CSS files -->
<script src="node_modules/sculptorjs/dist/sculptor.js" type="text/javascript"></script>
<link rel="stylesheet" href="node_modules/sculptor/dist/sculptor.css" type="text/css"/>
</head>
<body>
<select id="age-selector" name="age">
<option value="1">One</option>
<option value="2">Two</option>
</select>
</body>
</html>
// Just a closure
(function (w, doc) {
"use strict"
var myAgeSelector;
// On window load, get the select element that I would like to style and pass it into sculptor
w.onload = function () {
myAgeSelector = doc.getElementById("age-selector");
sculptor.init([myAgeSelector]); // Notice that an array is required even for a single element - [myAgeSelector]
}
}(window, document));
After Sculptor JS is installed, please reference the base css in your page. This can be as simple as copy/pasting the css in node_modules/sculptorjs/dist/sculptor.css to your existing stylesheets or referencing the file directly.
NOTE: If you're running with LESS then please feel free to @import "node_modules/sculptorjs/src/sculptor.less"
Load up your HTML page in your favorite browser and you should no longer be seeing the native select elements but their Sculptor JS counterparts.
We love feedback! If you run into any issues while installing or using this project, please create a new issue here. If the issue is related to a specific browser(s), then please be sure to leave the browser information in the issue description.
We would like to take this opportunity to thank everyone at 
for allowing us the time to work on open sourcing this project. Without their support, this project would not exist.
FAQs
Allows you to easily 'sculpt' beautiful, cross-browser HTML dropdowns with standard CSS
The npm package sculptorjs receives a total of 3 weekly downloads. As such, sculptorjs popularity was classified as not popular.
We found that sculptorjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers 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.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.