Beautify Native Select Elements With JavaScript – nativejs-select

Preview:

Description:

nativejs-select is a vanilla JavaScript plugin to beautify the native select boxes with custom styles.

How to use it:

Import the nativejs-select’s JavaScript and CSS files into the html document.

<link rel="stylesheet" href="nativejs-select.css">
<script src="nativejs-select.min.js"></script>

That’s it. The plugin will automatically apply custom CSS styles to the matched select elements within the document. You’re able to customize the placeholder using the ‘data-placeholder’ attribute as this:

<select name="month" data-placeholder="Select month:">
  <option value="1">July</option>
  <option value="2">March</option>
  <option value="3">August</option>
</select>

To make the placeholder fixed:

<select name="month" data-fixed-placeholder="Month:">
  <option value="1">September</option>
  <option value="2">June</option>
</select>

Changelog:

v1.0.5 (04/25/2020)

• Bugfixed

v1.0.3 (12/28/2019)

• Bugfixed