4

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

Improve this question
7
  • 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 Commented Jun 19, 2013 at 8:52
  • This question is asked so often, did you search for your answer? Check the related questions > Commented Jun 19, 2013 at 8:53
  • i provided the code, whats not working is the padding and the font size Commented Jun 19, 2013 at 8:55
  • It totally works: jsfiddle.net/Yg7qa downvote is near... Commented Jun 19, 2013 at 9:00
  • 1
    yeah, actually, it doesn't work at all. do you see any padding on the options??????? Commented Jun 19, 2013 at 9:03

5 Answers 5

Reset to default
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

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

Comments

2

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>

Improve this answer

1 Comment

i am not allowed to use jquery, isnt it possible with javascript?
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

Improve this answer

Comments

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; }
Improve this answer

Comments

-3

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

According to those bootstrap people

Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.