Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped.

For syntax of the previous version click here

How to use


npm install pickout --save


bower install pickout --save

Inserting HTML

Include the style

<link rel="stylesheet" href="./path/to/pickout.min.css">

Include the script

<script src="./path/to/pickout.min.js"></script>

Or Using CDN

Taking advantage that cdn provides, you can use the pickout in cdnjs to include the files in your page:

<link rel="stylesheet" href="">
<script src=""></script>

Example of block the select field

<!-- 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>

<!-- 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="&spades;" value="Spade">Spade</option>
            <option data-icon="&clubs;" value="Club">Club</option>
            <option data-icon="&hearts;" value="Heart">Heart</option>
            <option data-icon="&diams;" value="Diamond">Diamond</option>


data-icon : Icon code, for example: "e602", simply use data-icon="&#xe602";

Field selection with option group

<!-- 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" selected>Brazil</option>
                <option value="Canada">Canada</option>                      
            <optgroup label="Europe">
                <option value="Ireland">Ireland</option>
                <option value="Spanish">Spanish</option>
                <option value="Italy">Italy</option>
                <option value="Portugal">Portugal</option>                      

Set the select'.country');

Another option{
  el: '.country'

OBS: Do not forget to declare the characters responsible dial if class use (.) If ID using the (#)

Search field

Field to search options within the modal, default is false{
  el: '.country',
  search: true

Set all at once

You can assign to selects separately, however you can apply all at once, simply declare a class in common to all selects and inform the plugin, for example:'.all');

Selecting multiple options

Simply enter the multiple HTML attribute in the field select what you want

<div class="form-group">
    <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="Scrum">Scrum</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>

to set the select to pickout'.skills');

For options already selected by default, uses the method


With this method the pickout already initializes the tags of options with the selected attribute

Customize styles

To customize, simply add in your CSS rule with this pattern:

    // my customization 
    // my customization 

And the definition of pickout informs the theme{
  el: '.city',
  theme: 'MySelector'


theme - Modify the visual style, customized through CSS.

  • clean (Default)

OBS: You can check or contribute more topics customizam the pickout completely. Theme styles{
  el: '.state',
  theme: 'dark' // For dark theme, available in dir style themes

Select with default values

<div class="form-group">
    <label for="state">State:</label>
    <div class="pk-form">
        <select name="state" id="state" class="state all" placeholder="Select to option">
        <!-- Option selected by default -->
            <option value="opt1" selected>Option 1</option>
            <option value="opt2">Option 2</option>

It uses the updated function


Current version stable


Browser Support

Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo
Yes ✔ Yes ✔ 9+ ✔ Yes ✔ 8+ ✔



  • New CSS class to wrap form
  • New syntax: add div tag before select
  • Bugfix: Search with spaces (by @alexsmonte)


  • Fix the arrow style

v1.3.1 / v1.3.2

  • Add link Demo Page
  • Styles themes
  • Correction in modal


  • Multiple options


  • New Style theme
  • Correction in modal css


  • Support to option group
  • Optimizing for support to IE
  • Separation of style themes css files


  • Search field


  • Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.
  • Fork repository, make changes, add your name and link in the authors session
  • Send a pull request

If you want a faster communication, find me on @ktquez

thank you