8 August, 2022

How to Custom Style a Select Box with Form Value Support?

How to create custom select box

This step-by-step tutorial explains “how to style a select box using CSS and jQuery”. At the end of this tutorial, you will learn traversal, manipulation and event handling in jQuery and data-attributes in HTML.

The moment that forced me to find a solution:

“Hi Vel, The form design is fantastic except for the select box. Could you please apply some styles for that field? Make sure that it works in all major browsers,” one of my client’s reply to a web-based project. CSS developers and god only know that neither <select> </select> nor <option> </option> can be styled. Customer Satisfaction is our agenda; no denying it. So I was forced to find out a solution for the client and I came up with the following solution after thorough research.

I simply changed select tag into ul and option into li and applied necessary styles. I had also used jquery to show selected options on the top of the bar. Client was also satisfied with the design and UI.

But, to my surprise the real problem came out from my fellow developer!

My PHP developer came to me and shouted, “How dare you change my select box into your stupid uls and lis? Now the form is not working properly. The value of selected option is not being inserted into my database. Revert the fields and keep it as a simple select box and convenient to your client.”

Just reckon my situation. At that moment an idea sparked into my brain that’s <input type=”hidden”>. With the help of data-attributes I was able to style the select box value without any malfunctions. Let me go ahead technically to let you know how it helped to solve the entire problem.

Read: How to Generate RSS Feed for Custom Component in Joomla?

Step 1: Change the markup:

As you know well, select box box can never by styled, even by god.  So we need to change the markup into unordered list (ul),

Before:
<select>
    <option>Option 1</option>
    <option>Option 2</option>
   <option>Option 3</option>
    <option>Option 4</option>
</select>
After:
<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
</ul>

In a select box you could have noticed that a default option would have been shown at the top and every time it will be replaced by the option which is chosen by a user, to show that we need to add few more tags to our mark up. So the final markup will be:

<div>

    <span>Option 1</span>
    <span>down arrow</span>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
    </ul>
<div>

The first span is to show the last chosen option and the next one is to show the down arrow.

Step 2: Add Class names and data-attributes:

You will not need any explanations for class names but what are data-attributes? You may have this question. Here is the answer for that.

Every option tag will have an attribute called value. Bound text in this attribute will be stored into database. But we cant assign valueattribute to a li tag. So we need to assign some data-attribute to store the value and I have used data-value here. For better understanding on data-attribute, you may visit this page.

The updated markup will be like:

<div class=”selectBox”>
<input type=”hidden” value=”value 3″ class=”price_values”>
<span class=”selected”>Option 3</span>
<span class=”selectArrow”>&#9660</span>
<ul class=”selectOptions” style=”display: none;”>
<li class=”selectOption” data-value=”value 1″>Option 1</li>
<li class=”selectOption” data-value=”value 2″>Option 2</li>
<li class=”selectOption” data-value=”value 3″>Option 3</li>
</ul>
</div>

Note: The magic happens at the hidden input tag. We will be binding text to the ‘value’ attribute later using jQuery.

Step 3: Style the markup:

No one will read this article this much, without knowledge in CSS. So I don’t want to waste both yours as well as my time by explaining how to style this drop down option bar using CSS. Here is the code. Just play with the code to fine tune the design as per your wish.

div.selectBox{position: relative; display: inline-block; cursor: default; text-align: left; line-height: 30px; clear: both; color: rgb(114, 97, 97);}
span.selected{width: 167px; text-indent: 10px; border: 1px solid rgb(233, 233, 233); border-right: none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: #f6f6f6; overflow: hidden;font-family: Arial, sans-serif;font-size: 12px;font-weight: bold;
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’, endColorstr=’#ffffff’,GradientType=0 );
}
span.selectArrow{width: 30px; border: 1px solid #60abf8; border-top-right-radius: 5px; border-bottom-right-radius: 5px; text-align: center; font-size: 12px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; background: #4096ee; color: #fff;}
span.selectArrow,span.selected{position: relative; float: left; height: 30px; z-index: 1;}
ul.selectOptions{position: absolute; top: 28px; left: 0; width: 198px; border: 1px solid #ccc; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; overflow: hidden; background: rgb(250, 250, 250); padding-top: 2px; display: none;margin: 0;list-style: none inside none;padding-left: 0;}
li.selectOption{display: block; line-height: 20px; padding: 5px 0 5px 10px; font-size: 12px; font-weight: bold; font-family: arial, sans-serif;list-style: none;margin: 0}
li.selectOption:hover{color: #f6f6f6;background: #4096ee;}

Step 4: Make it work like a select box using jQuery:

Here lies the real challenge. The user should experience dropdown box as a custom styled select box. This can be accomplished through jQuery and I have explained the process line by line below:

a. Binds first option into a span with a class ‘.selected’

$(this).children(‘span.selected’).html($(this).children(‘ul.selectOptions’).
children(‘li.selectOption:first’).html());

b. Bind value of first option into the hidden input element

$(‘input.price_values’).attr(‘value’,$(this).children(‘ul.selectOptions’).
children(‘li.selectOption:first’).attr(‘data-value’));

c. In default, hide the dropdown box and make it visible when user click on the select box (toggle it):

$(this).children(‘span.selected,span.selectArrow’).click(function(){
if($(this).parent().children(‘ul.selectOptions’).css(‘display’) == ‘none’){
$(this).parent().children(‘ul.selectOptions’).css(‘display’,’block’);
}
else
{
$(this).parent().children(‘ul.selectOptions’).css(‘display’,’none’);
}
});
d. Change value attribute’s content and value of ‘span.selected’ when ever user choose an optoin:

$(this).find(‘li.selectOption’).click(function(){ $(this).parent().css(‘display’,’none’);
$(this).closest(‘div.selectBox’).attr(‘value’,$(this).attr(‘data-value’)); $(‘input.price_values’).attr(‘value’,$(this).attr(‘data-value’));
$(this).parent().siblings(‘span.selected’).html($(this).html());
});

You may download the source file from GitHub..

Conclusion:
I believe that you have learnt how to design a custom styled select box and use it with a form without changing the nature functionality of a select box. Drop your feedback and suggestion in the discussion form available below.

5 Comments

  1. Omar Reply

    Thanks for shared this tutorial in a stepwise manner. Informative post for learners. I get a better idea by go through this.

    1. ramanathan Reply

      It’s satisfactory to hear such recognition from readers. We have more tutorials and write-ups posted by our technical team in this blog. Kindly take your time to check those interesting posts as well.

  2. robin Reply

    Hey, I was wondering if you’ve tried this with Magneto Configurable products where you have conditional select menus.

    Thanks

  3. Vignesh Reply

    Described in a detailed way. Thanks for step by step procedure & explanation. Now, I can create my custom style select box with form value support.

Leave a Reply

Your email address will not be published. Required fields are marked *