Here, we will discuss adding an image to an HTML select tag. Select Tag is among the most commonly used website features; it allows you to create a drop-down list.
Now, many times, it’s required to add a specific image concerning a particular value in the drop-down menu; the default select Tag does not allow you to add a photo. Here, I have made a simple jQuery tweak with which you can embed a shot into the drop-down menu with cross-browser compatibility.
I will now explain the procedure step-by-step.
1) Construct the HTML structure as follows:
<div class="drop-down"> <select name="options"> <option class="en" value="en" style="background-image:url('images/en.png');">English</option> <option class="fr" value="fr" style="background-image:url('images/fr.png');">French</option> <option class="nl" value="nl" style="background-image:url('images/nl.png');">Nederlands</option> </select> </div>2) Use following js to convert select list to ul-li structure:
jQuery().ready(function() { /* Custom select design */ jQuery('.drop-down').append('<div class="button"></div>'); jQuery('.drop-down').append('<ul class="select-list"></ul>'); jQuery('.drop-down select option').each(function() { var bg = jQuery(this).css('background-image'); jQuery('.select-list').append('<li class="clsAnchor"><span value="' + jQuery(this).val() + '" class="' + jQuery(this).attr('class') + '" style=background-image:' + bg + '>' + jQuery(this).text() + '</span></li>'); }); jQuery('.drop-down .button').html('<span style=background-image:' + jQuery('.drop-down select').find(':selected').css('background-image') + '>' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>'); jQuery('.drop-down ul li').each(function() { if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) { jQuery(this).addClass('active'); } }); jQuery('.drop-down .select-list span').on('click', function() { var dd_text = jQuery(this).text(); var dd_img = jQuery(this).css('background-image'); var dd_val = jQuery(this).attr('value'); jQuery('.drop-down .button').html('<span style=background-image:' + dd_img + '>' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>'); jQuery('.drop-down .select-list span').parent().removeClass('active'); jQuery(this).parent().addClass('active'); $('.drop-down select[name=options]').val( dd_val ); $('.drop-down .select-list li').slideUp(); }); jQuery('.drop-down .button').on('click','a.select-list-link', function() { jQuery('.drop-down ul li').slideToggle(); }); /* End */ });3) Use the following css to hide the select box, & make the option list work on ul-li. Also style the dropdown:
.drop-down { position: relative; display: inline-block; width: auto; margin-top: 0; font-family: verdana; } .drop-down select { display: none; } .drop-down .select-list { position: absolute; top: 0; left: 0; z-index: 1; margin-top: 40px; padding: 0; background-color: #595959; } .drop-down .select-list li { display: none; } .drop-down .select-list li span { display: inline-block; min-height: 40px; min-width: 280px; width: 100%; padding: 5px 15px 5px 35px; background-color: #595959; background-position: left 10px center; background-repeat: no-repeat; font-size: 16px; text-align: left; color: #FFF; opacity: 0.7; box-sizing: border-box; } .drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; }Final result
This blog is a quick and easy guide for cross-browser compatibility. Thanks For the Web Design company contact us now!!
