about 5 years ago
Hello Friends,
If you are looking to create a custom select box, you can use below HTML and CSS code I have provided.
Below an example of custom select box.
HTML -
<div class="wrapper"> <input id="textfield" type="text" name="" value="" placeholder="Select"> <ul class="list-option"> <li>Bahrain</li> <li>Bangladesh</li> <li>Barbados</li> <li>Belarus</li> <li>Belgium</li> <li>Belize</li> <li>Benin</li> <li>Bhutan</li> <li>Bolivia</li> </ul> </div>
CSS -
div{ width:200px; margin:10px auto; } input{ width:100%; border:1px solid #00a9c8; padding:5px 20px 5px 5px; background:url(https://raw.githubusercontent.com/mukulkant/easy-custom-select-box/master/tg.png) no-repeat 97% center / 10px 8px; font-size:13px; } ul{ display:none; background:#00a9c8; height: 300px; overflow-y: scroll; overflow-x: hidden; } ul li{ list-style:none; width:200px; padding:5px; color:#fff; font-size:13px; } ul li:hover{ background:#079fba; }
Script-
$(document).ready(function(){ $('ul li').click(function(){ $('#textfield').val($(this).text()); $('ul').slideUp('fast'); }); $('#textfield').focus(function(){ $('ul').slideDown('fast') }); }); $(document).on('click', function (e) { if ($(e.target).closest("#textfield").length === 0) { $("ul").slideUp('fast');; } });
Output -
Hope It helps you :)
Starting with Chrome version 45, NPAPI is no longer supported for Google Chrome. For more information, see Chrome and NPAPI (blog.chromium.org).
Firefox and Microsoft Internet Explorer are recommended browsers for websites using java applets.
Chrome Version Support
Are you sure, you want to delete this comment?
Sign up using
0 Comment(s)