PICKOUT

<!-- Normal use -->
<div class="form-group">
	<label for="option">Option:</label>
	<div class="pk-form">
		<select name="option" id="option" class="option all" placeholder="Select a option">
			<option value=""></option> <!-- If the check is not required, submit a default value empty -->
			<option value="opt1">Option 1</option>
			<option value="opt2">Option 2</option>
			<option value="opt3">Option 3</option>
			<option value="opt4">Option 4</option>
		</select>     
	</div>  
</div>

// javaScript
pickout.to('.option');

pickout.updated('.option');

<!-- Using with icons -->
<div class="form-group">
	<label for="suit">Suit:</label>
	<div class="pk-form">
		<select name="suit" id="suit" class="suit all" placeholder="Select a suit">
			<option value=""></option> <!-- If the check is not required, submit a default value empty -->
			<option data-icon="♠" value="Spade">Spade</option>
			<option data-icon="♣" value="Club">Club</option>
			<option data-icon="♥" value="Heart">Heart</option>
			<option data-icon="♦" value="Diamond">Diamond</option>
		</select>    
	</div>   
</div>

// javaScript
pickout.to({
	'el': '.suit',
	'search': true,
	'noResults': 'RESULTADO NÃO ENCONTRADO'
});

<!-- Option group -->
<div class="form-group">
	<label for="country">Country</label>
	<div class="pk-form">
		<select name="country" id="country" class="country all" placeholder="Select a Country">
			<option value=""></option> <!-- If the check is not required, submit a default value empty -->
			<optgroup label="America">
				<option value="EUA">EUA</option>
				<option value="Brazil">Brazil</option>
				<option value="Canada">Canada</option>                      
			</optgroup>
			<optgroup label="Europe">
				<option value="Ireland">Ireland</option>
				<option value="Spanish">Spanish</option>
				<option value="Italy">Italy</option>
				<option value="Portugal">Portugal</option>                      
			</optgroup>
		</select>
	</div>           
</div>

// javaScript
pickout.to({
	'el': '.country',
	'theme': cricket
});

<!-- Option group -->
<div class="pk-form">
	<label for="Skills"><h3>Your skills</h3></label>
	<div class="pk-form">
		<select name="skills[]" id="skills" multiple class="skills" placeholder="Add your Skills">
			<option value=""></option> <!-- If the check is not required, submit a default value empty -->     
			<option value="PHP">PHP</option>
			<option value="Ruby">Ruby</option>
			<option value="C++">C++</option>
			<option value="Python">Python</option>
			<option value="Java">Java</option>
			<option value="Cobol">Cobol</option>
			<option value="Javascript">Javascript</option>
			<option value="AngularJS">AngularJS</option>
			<option value="Ionic">Ionic</option>
			<option value="VueJS">VueJS</option>
			<option value="ReactJS">ReactJS</option>
			<option value="React Native">React Native</option>
		</select>      
	</div>     
</div>

// javaScript
pickout.to({
	'el': '.skills',
	'theme': cricket
});

pickout.updatedMultiple({
	'el': '.skills',
	'theme': 'cricket'
});