Some inspiration for styling a custom version of the select element. There are many possibilities and today we are exploring some ideas of how to let the user select a choice in style.
Inspired by INSPIRATION FOR CUSTOM SELECT ELEMENTS
Check out example/index.html, the example javascript for the example page is resources/js/example_src.js
$ npm install periodicjs.component.selectfx
The selectfx component is a browserified javascript module.
JavaScript
var SelectFX = require('periodicjs.component.selectfx'),
myFXSelect;
//initialize nav component after the dom has loaded
window.addEventListener('load',function(){
var selectElement = document.querySelector('select');
myFXSelect = new SelectFX(selectElement);
//expose your component to the window global namespace
window.myFXSelect = myFXSelect;
});HTML
<html>
<head>
<title>Your Page</title>
<link rel="stylesheet" type="text/css" href="[path/to]/component.selectfx.css">
<script src='[path/to/browserify/bundle].js'></script>
</head>
<body>
<div class="container">
<section>
<select class="cs-select cs-skin-elastic">
<option value="" disabled selected>Select a Country</option>
<option value="france" data-class="flag-france">France</option>
<option value="brazil" data-class="flag-brazil">Brazil</option>
<option value="argentina" data-class="flag-argentina">Argentina</option>
<option value="south-africa" data-class="flag-safrica">South Africa</option>
</select>
</section>
</body>
</html>##API
####Full API DOCUMENTATION
new SelectFX(selectElement, {
onChange: function(val) {
console.log('val', val); //callback for value change
}
});##Development Make sure you have grunt installed
$ npm install -g grunt-cli
Then run grunt watch
$ grunt watch
##Notes
- The less file is located in
resources/stylesheets