Add Label Inside Select Box With Custom Text - jQuery serialselect

File Size: 6.08 KB
Views Total: 1281
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Add Label Inside Select Box With Custom Text - jQuery serialselect

There are a lot of jQuery plugins dedicated to improving user experience that offers great features like contextual label/titles, dynamic hints, pretty good filters and many others. But there's one thing these plugins don't offer: Inserting a label inside a <select> tag.

serialselect is a super tiny jQuery plugin that simply adds a label element inside the select box with custom text. So the user will have a quick access to the information about the item he's trying to choose.

How to use it:

1. Download and load the serialselect plugin's files.

<link rel="stylesheet" href="/path/to/dist/jquery.serialselect.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.serialselect.js"></script>

2. Add the CSS class 'sub-select' to the select element and create a label element inside it with the CSS class of 'sub-term':

<span class="js-serialselect">
  <label class="sub-term">Programming Language: </label>
  <select class="sub-select">
    <option>Python</option>
    <option>Java</option>
    <option>JavaScript</option>
    <option>Kotlin</option>
    <option>R</option>
    <option>PHP</option>
    <option>Go</option>
    <option>C</option>
    <option>Swift</option>
    <option>C#</option>
    <option>HTML5</option>
    <option>CSS/CSS3</option>
    <option>AngularJS</option>
    <option>ReactJS</option>
    <option>VueJS</option>
  </select>
</span>

3. Call the function serialselect() on the top container. That's it.

$(document).ready(function(){
  $('.js-serialselect').serialselect();
});

4. Override the default CSS selectors.

$(document).ready(function(){
  $('.js-serialselect').serialselect({
    termClass: 'sub-term',
    valueClass: 'sub-value'
  });
});

5. Override the default styles of the select & label elements.

.js-serialselect {
  display: block;
  position: relative;
  color: #000;
  font-size: 15px;
}

.js-serialselect .sub-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.js-serialselect .sub-term {
  display: block;
  padding: 15px 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #fff;
  border-radius: 3px;
}

.js-serialselect .sub-term:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E") 0 center no-repeat;
}

.js-serialselect .sub-value {
  margin-left: 5px;
  font-weight: 600;
}

This awesome jQuery plugin is developed by kevinmeunier. For more Advanced Usages, please check the demo page or visit the official website.