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

Disabling the default setting can enable you a little more freedom - give your select a class, within that class use the following:

-webkit-appearance:none; 
-moz-appearance:none; 
 appearance:none;

and then add in your default style

Answer 2

You can give style to select tag like this or you can use class name or id as well

select
{
    display: inline-block;
    width: 150px;
    height: 20px;
    padding: 3px 6px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Answer 3

html5 specification does not provide generic style properties to customize this user input control element. the only way found on net was using label element to reference this control for styling purpose

Answer 4

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

According to those bootstrap people

Answer 5

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 = $('<ul />');
  $select.find('option').each(function() {
    $list.append('<li>' + $(this).text() + '</li>');
  });
  //Remove the select after the values are taken
  $select.after($list).remove();


  //Append Default text to show the selected
  $(this).append('<span>select</span>')
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>First Select</label>
<div class="select">  
    <select>
         <option>Item</option>
         <option>Item 2</option>
         <option>Item 3</option>
    </select>
</div>

<label>Second Select</label>
<div class="select">
    <select>
         <option>this 1</option>
         <option>this 2</option>
         <option>this 3</option>
    </select>
</div>