How to style HTML select/option tag?

Question

I would like to create a dropdown menu with html select thus I would like to style it as well. I would like to set a padding to the option tags so they wouldn\'t be so overc

Answer 1

It is difficult to style select menu with css. The Best way of doing it is with jquery u can style and have a better control over the code with jquery. Just use a custom jquery like http://gregfranko.com/jquery.selectBoxIt.js/

I have just made an example of styling select with jquery, you can check the demo here

// Code to convert select to UL
$('.select').each(function() {
  var $select = $(this).find('select'),
    $list = $('
');
  $select.find('option').each(function() {
    $list.append('
' + $(this).text() + '
');
  });
  //Remove the select after the values are taken
  $select.after($list).remove();


  //Append Default text to show the selected
  $(this).append('select')
  var firsttxt = $(this).find('li:first-child').text();
  $(this).find('span').text(firsttxt)

  // On click show the UL
  $(this).on('click', 'span', function(e) {
    e.stopPropagation();
    $(this).parent().find('ul').show();
  });

  // On select of list select the item
  $(this).on('click', 'li', function() {
    var gettext = $(this).text();
    $(this).parents('.select').find('span').text(gettext);
    $(this).parent().fadeOut();
  });

})


// On click out hide the UL
$(document).on('click', function() {
  $('.select ul').fadeOut();
});

body {
  font-family: 'arial', san-serif;
}

.select {
  width: 200px;
  height: 30px;
  border: 1px solid #ffffd;
  line-height: 30px;
  position: relative;
  margin-bottom: 40px;
}

.select span {
  display: block;
  color: #333;
  font-size: 12px;
  padding: 0 10px;
}

.select ul {
  display: none;
  background: #fff;
  border: 1px solid #ffffd;
  min-width: 300px;
  position: absolute;
  top: 100%;
  left: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 10;
}

.select ul > li {
  font-size: 12px;
}

.select ul > li {
  color: #333;
  display: block;
  padding: 2px 8px;
  text-decoration: none;
  line-height: 24px;
}

.select ul > li:hover {
  background: #e4f4fa;
  cursor: pointer;
}

First Select
  
    
         Item
         Item 2
         Item 3
    


Second Select

    
         this 1
         this 2
         this 3