Custom Select with UIkit

Creates a custom select with UIkit.

General

Add the css and the js file to your page and call the createSelectElements function at the point you want to create the custom select. I recommend after the JS of Uikit.

There are three parameters that you can give the function.

  {
    "adjust-width": true,
    "ms": 20,
    "two": true
  }

• The parameter adjust-width lets you customize if the selects should have the same width. Use either true of false.
• The ms parameter is a parameter that lets the script wait a certain amount of ms before it adjusts the size of the input boxes. The default value is 20ms. You can turn the delay of by using a value of 0. In this case the width of all the selects may not be the same, because UIkit loads loads the icons after the execution of this script.
• The two parameter lets you choos if there will be a special case for selects with only two values. If you let the value be the default (true) the currently selected value will not be displayed. Only the other value will be visible in the select dropdown.

You can focus the elements with tab just like you would normally do. If you focus a element you can press enter. This will result in the same action as if you would have clicked the element.

Usage

To create a custom select add the class custom-select to a div. Inside of this div create the select element with the different options.
It is crucial that you add a selected tag to the default value of the select and that every option has a value.
The label element is optional as well as the uk-padding-middle class.

<div class="custom-select uk-padding-middle">
    <select id="custom-select">
        <option value="audio" selected>Audio</option>
        <option value="video">Video</option>
    </select>
    <label>Format</label>
</div>

Call the follwoing functions with your arguments to create the selects.

createSelectElements({
    "adjust-width": true,
    "ms": 20,
    "two": true
  })  

If the value of the select changes a change event gets fired. This is the only event you get from the orginal select. If you want to have the value of the select just use the value of the select you created. It is not visible, but the value is always up to date.

document.getElementById("custom-select").addEventListener("change", evt => {
  console.log("My value has changed and is now "  
              + evt.currentTarget.value);
});

If you want to change the width of the custom selects after their initialisation you can call the adjustSize function with two parameters. The default parameters are the parameters in the example below.

The ms parameter tells the function how long it is supposed to wait until it tries to resize the element.
The className parameter lets you if the select button (select-button), or the label button (select-label-button) should be resized.

adjustSize({
  "classname": "select-button",
  "ms": 20
  });

Result

Select with tow options (one allready selected and therefore not visible anymore).

A select with more than two options. The selected option is highlighted.

Select without a label.

Dependencies

The UIkit files you should have linked:

• uikit.js
• uikit-icons.js
• uikit.css