Categories
CSS HTML Jquery

Adding space/padding between options of select tag in IE browser

By using css properties we can add space in between options of a select element and it will work well in browsers like Firefox and Chrome. However, it will not work in IE. We can’t style “<option>” elements in Internet Explorer with most of the css properties. Only background and font color property will work in IE other proprties will inheritfrom the Windows operating system.

Adding space/padding between options of select tag in IE browser

If we want to create a consistent appearance across the browser, we have to use custom JavaScript/jQuery to replaces the default select element style on your page.

Here is a simple code to create custom select style, only thing you have to do is add class name to the select box you want to style

<!DOCTYPE html>
<html>
   <head>
      <title>Demo :: Custom Select box</title>
      <style type="text/css">
         .custom-drop-down {   
         display: none;    
         } 
         .custom-dropdown-button {
         cursor: pointer;
         min-width: 100px;
         border: 1px solid;
         padding: 10px;
         width:120px;
         position:relative;
         }
         .custom-dropdown-button a{
         border: solid black;
         border-width: 0 3px 3px 0;
         display: inline-block;
         padding: 3px;
         transform: rotate(45deg);
         -webkit-transform: rotate(45deg);
         position: absolute;
         right: 10px;
         top: 13px;
         }		
         .custom-dropdown-list {   
         position: absolute;     
         top: 8px;      
         left: 8px;     
         z-index: 1;    
         margin-top: 40px;    
         padding: 0;         
         background-color: #222;      
         }      
         .custom-dropdown-list li {   
         display: none;      
         }    
         .custom-dropdown-list li span {  
         display: inline-block;      
         line-height: 50px;        
         min-width: 180px;      
         width: 100%;        
         padding: 0 15px 0 20px;     
         background-color: #222;       
         color: #FFF;      
         box-sizing: border-box;   
         }     
         .custom-dropdown-list li span:hover,  
         .custom-dropdown-list li span:focus {         
         color: #eee;   
         } 
      </style>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {   
         	$(".custom-drop-down").before("<div class='custom-dropdown-button'></div>");   
         	$('.custom-drop-down').before('<ul class="custom-dropdown-list"></ul>');    
         	$('.custom-drop-down option').each(function() {  
         		$('.custom-dropdown-list').append('<li><span value="' + $(this).val() + '" >' + $(this).text() + '</span></li>');   
         	});    
         	$('.custom-dropdown-button').html('<span>' + $('select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);"></a>');   
         	$('.custom-dropdown-list ul li').each(function() {   
         		if ($(this).find('span').text() == $('select').find(':selected').text()) {  
         			$(this).addClass('active');       
         		}      
         	});     
         $('.custom-dropdown-list span').on('click', function(){          
         	var dropDown_text = $(this).text();  
         	var dropDown_val = $(this).attr('value');   
         	$('.custom-dropdown-button').html('<span>' + dropDown_text + '</span>' + '<a href="javascript:void(0);"></a>');      
         	$('.custom-dropdown-list span').parent().removeClass('active');    
         	$(this).parent().addClass('active');     
         	$('select[name=options]').val(dropDown_val);
         	$('.custom-dropdown-list li').slideUp();   
         });       
         $('body').on('click','.custom-dropdown-button', function(){      
         	$('.custom-dropdown-list li').slideToggle();  
         });         
         });
      </script>
   </head>
   <body>
      <select name="options" class="custom-drop-down">
         <option value="One">One</option>
         <option value="Two" selected>Two</option>
         <option value="Three">Three</option>
         <option value="Four">Four</option>
      </select>
   </body>
</html>

Leave a Reply

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