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 overcrowded, but I can't do so. (it doesn't work) any idea?

#categories
{
padding: 10px 10px 10px 10px;
background-color: #826B78;
font-size: 20px;
color: white;
margin: 10px 10px 10px 10px;
border: none;
outline: none;
}

#categories option
{
margin: 30px 30px 30px 30px;
padding: 30px 30px 30px 30px;
font-size: 20px;
}

the categories id belongs to the select tag

This will be closed soon as "not a real question". It doesn't work means NOTHING if you don't provide 1) The code you tried, and 2) what exactly is not working — Andrea Ligios
– Andrea Ligios, Commented Jun 19, 2013 at 8:52
This question is asked so often, did you search for your answer? Check the related questions > — George
– George, Commented Jun 19, 2013 at 8:53
i provided the code, whats not working is the padding and the font size — gen
– gen, Commented Jun 19, 2013 at 8:55
yeah, actually, it doesn't work at all. do you see any padding on the options??????? — gen
– gen, Commented Jun 19, 2013 at 9:03

showdev · Accepted Answer · 2015-08-05 00:22:12Z

3

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

edited Aug 5, 2015 at 0:22

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Aug 4, 2015 at 20:26

user5191261

311 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

TylerH · Accepted Answer · 2016-12-23 15:38:33Z

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 #ddd;
  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 #ddd;
  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>

i am not allowed to use jquery, isnt it possible with javascript?

johnny · Accepted Answer · 2017-05-15 21:01:19Z

1

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

answered May 15, 2017 at 21:01

johnny

111 bronze badge

Comments

Tushar Gaurav · Accepted Answer · 2013-06-19 09:04:02Z

0

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;
}

edited Jun 19, 2013 at 9:04

answered Jun 19, 2013 at 8:57

Tushar Gaurav

5064 silver badges18 bronze badges

Comments

Assembler · Accepted Answer · 2014-03-20 07:16:26Z

-3

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

According to those bootstrap people

answered Mar 20, 2014 at 7:16

Assembler

7921 gold badge9 silver badges24 bronze badges

1 Comment

Sunil D. Over a year ago

Note that comment that you're quoting seems to be specifically for using the select tag with Bootstrap's .inputGroup class.

Collectives™ on Stack Overflow

How to style HTML select/option tag?

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Linked

Related