Increase gap between select menu options - html

I am creating a Drop down list in HTML using select tag. I am unable to increase the gap between the options inside the select list. Below is my code. How i can increase the gap between the options?
<style type="text/css">
#height {
width: 200px;
}
#height option {
width: 500px;
height:200px !important;
}
</style>
<select id="height">
<option value="bugatti">Bugatti</option>
<option value="lamborghini">Lamborghini</option>
<option value="ferrari">Ferrari</option>
<option value="levis">Levis</option>
<option value="reebok">Reebok</option>
<option value="nike">Nike</option>
</select>

The rendering of option tags is determined by the browser and they have their own peculiar way and so the restrictions like padding and even margin of option tag works in the mozilla firefox while it doesn't works with chrome.
Summary : If its very necessary to change the appearance, you can use custom JS plugins.

That is not possible. If you really need this you should create a custom Option Menu.
No padding, margin, height or line-height are working for options.
You can go with an empty option between the elements but its not a nice solution.

One workaround I found: Increase the font size of just one element (I chose the first one, which I always keep as a blank). I did it programmatically with Javascript:
document.getElementById("myddl").options[0].style.fontSize = "xx-large";
This forces all the options to be displayed with the same (enlarged) space, even though the fontsize of the other options is unchanged.

Woooo i tried this with different browser and one thing i found that by giving padding to the option of select tag this will only work in FireFox except other Browsers like(crome,Ie,safari)...!!!!!!
Strange ..!!!!
so you can try that dropdown with or jquery Pluggins for dropdown

Related

change the height of "option" only with css

For example,in the code,"option"is too low,I want to make it higher only with css(no javascript).
<select>
<option>Beijing</option>
<option>ShangHai</option>
<option>WuHan</option>
</select>
Since that <option> (and <select>) elements are rendered by the browser as a dropdown list, unfortunately you cannot style them, because their style is only controlled by the browser itself.
Change select > option to ul > li list and you can style as you want it yourself with Cross browser compatibility
You can use ul as alternative to style as you want, check this answer.
You can only make options bold or change the font-size, but it's not possible to change the space of the option.
option{font-size:20px;font-weight:bold;}
<select>
<option>Beijing</option>
<option>ShangHai</option>
<option>WuHan</option>
</select>
Options are rendered by the OS, not HTML, so the styling is limited.
line-height can be useful
-webkit-appearance: menulist-button this one can be used both will work
Try this:
option{
padding:10px 0;
}
JSFIDDLE DEMO
Also you can use the <optgroup> element to make it run in Chrome.
EDIT:-
Just saw that it is not reliable and cant be addressed perfectly for cross browser solutions.
MDN says:
Some elements simply can't be styled using CSS. These include all
advanced user interface widgets such as range, color, or date controls
as well as all the dropdown widgets, including , , and elements. The
file picker widget is also known not to be stylable at all. The new
and elements also fall in this category.
Alternative other than Javascript:
If possible then use Bootstrap's Dropdown.
If you're concerning about the mobile friendliness or the Google's mobile first SEO guidelines where the tappable items must not close to each other, then don't worry, modern mobile web browser will auto-adjust the item height for you.
Try This: change the height px to what you wish.
.a option { height: 50px; }

Why is last select option always shown, even when styled out

While answering another question I came across this weird bug. A quick search has not found an existing question, so here goes:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/93D3h/4/
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option class="hidden">Item4</option>
<option class="hidden">Item5</option>
</select>
CSS:
.hidden {
display: none;
}
Q: Why is Item5 always shown, even though it is styled as hidden? Item4 is not visible. Note: I am testing this in the latest version of Chrome.
Update:
Different people are getting different results on different browsers. The following (from answer below) works on Chrome but not on the latest IE (both Item4 and Item5 are shown):
.hidden {
visibility: hidden;
}
Turns out this problem has been hit before (no surprise): How to hide a <option> in a <select> menu with CSS? but the surprising thing is that browsers do not support removing options with styling. Go figure!
Styling OPTION elements using CSS is not a reliable solution because user agents implement this very differently and non-standard. I wouldn’t call this a bug, because there is no style attribute definition in the specs for the OPTION element: http://www.w3.org/TR/html401/interact/forms.html#h-17.6
You could use the disabled property instead:
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option disabled>Item4</option>
<option disabled>Item5</option>
</select>
And/or use JavaScript to manipulate the DOM. A pretty good start would be to target the disabled elements for semantic fallback:
[].forEach.call(document.querySelectorAll('*[disabled]'), function(element) {
element.parentNode.removeChild(element)
})
Demo: http://jsfiddle.net/93D3h/15/
Or use jQuery: $('[disabled]').remove()
Update:
Based on the comments and the new requirements, I made a small toggle demo here using data attributes instead: http://jsfiddle.net/95Ed5/
try this code
.hidden {
visibility: hidden;
}
Designed to display or hide the element, including a frame around it and background. When you hide an element, although it is not displayed at a place that takes the element remains on him. If the intended output of different elements in the same place on the screen to bypass this feature should use absolute positioning, or use the property display.
Your best shot (cross browser solution) would be to use jquery to store the hidden values. It can be done it regular javascript too.
var array = $(".hidden");
$(".hidden").remove();
And then when you need them you get them in array
Update
Here is the updated fiddle : http://jsfiddle.net/93D3h/16/
I added two buttons to show what you could do with the stored hidden values (add them back to the select, or remove them)

Width issues using HTML select within a DIV using IE

Here is an example I have put on jsfiddle
<div style='width:30px;border:solid 1px'>
<select style='width:100%'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
<br/>
<br/>
<div style='width:300px;border:solid 1px'>
<select style='width:100%'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
In every browsers (FF,Chrome,Safari,IE9,IE9 in IE8 mode) other than IE 7/8, the options of the first combo are fully visible. IE8 is limiting the width of the options to the width of the outer div.
Here is a
Any idea how to fix that?
Adding overflow: hidden; to the div's style and width: auto; float: right; to the <select> seems to work for me.
<div style='width:30px;border:solid 1px; overflow: hidden'>
<select style='width:auto; float: right;'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
See working example at http://jsfiddle.net/J7sYq/10/
Sadly there is no css solution for this as it relates to the elements behaviour.
As such I will direct you to another source.
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
This changes the width of the element when it is focused on and sets it back when it loses focus. Not very elegant but still allows the whole option to be seen.
Hope this helps.
I know there are already a whole bunch of answers here. But none of the workarounds really suits my requirement when I met the same problem: I need to put the select inside a fixed width div. Beyond the width, it will be hidden and I don't want to see this - it's pure ugly. The first time I saw this link, I though I finally found what I want. But after playing with the demo, I was disappointed. The CSS tricks works a bit but it will change the width in whole not just the drop down list. What I need is a really nice looking select just as it should look on other browsers than IE.
I finally worked it out myself using javascript and css plus some ie version specific check. This is a summary of what I did:
Use a transparent div the same size as the select to cover the select. Now we can still see the item under the div but we cannot click on it.
The transparent div now intercept the mouse click and populate an unordered list with the items from the select. Then we show the list right under the original select. It looks exactly like a clicked select on other browsers.
When an item is selected in the unordered list, the list will be hidden and the corresponding item in the original select will be selected.
This approach requires more code, but it really simulate the "right" behavior of the select. The unordered list is styled with css, making it easier to change the look. It is tested under ie7-8.
Following is a screenshot from a working project viewed in ie 8:
Don't know of any solution (this is IE fancy world). Maybe a different widget for IE8 or less (extjs combo, jquery ui combo or some pop menu library).
This is what works for me:
<div style='max-width:300px;min-width:300px;border:solid 1px'>
<select style='width:300px'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
<br/><br/>
use * before your css property for ie specific css.
When marked with * only ie8 can understand
p.myclass {
width: 30px;
*width: 300px;
}/* Just an example*/
The ie8 browser will take its own property what you specify and use that. By this you can alert your site specific to ie8, but your property with * should come after the default property. see the code
You have specified width to the outer div consisting the select box. And it looks the same for me in all browsers.
If you want it to stretch based on the length of the options in the select box, then simply just don't specify any width or just say width:auto.
Check this http://jsfiddle.net/J7sYq/3/

Problem with html drop down list

I am having problem with my html drop down select box. I have long list of items in select box therefore it goes outside of my screen. it doesn't shows scroll bar. Please help
Try forcing the size:
<select ... size="1">
Could you post the HTML and any css that styles the select? Inspect the select element in Firebug and see what the overflow attribute is set that (it should default to auto and create the scrollbar if necessary).
<select id="#long-select>
<option ...>...</option>
<option ...>...</option>
...
</select>
Then the correspond CSS:
#long-select { overflow: auto; }
Try opening your page in IE, should show all elements.
I think it is a bug in Firefox, that the list element is always aligned to the select field. IE does not show the list outside of the screen.

Setting the height of a SELECT in IE

IE seems to ignore the height set in CSS when rendering a HTML SELECT. Are there any work around's for this or do we have to just accept IE will not look as good as other browsers?
There is no work-around for this aside from ditching the select element.
It is correct that there is no work-around for this aside from ditching the select element, but if you only need to show more items in your select list you can simply use the size attribute:
<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Doing this you'll have additional empty lines if your collection of items lenght is smaller than size value.
you can use a combination of font-size and line-height to force it to go larger, but obviously only in the situations where you need the font larger too
edit:
Example -> http://www.bse.co.nz EDIT: (this link is no longer relevant)
the select next to the big search box has the following css rules:
#navigation #search .locationDrop {
font-size:2em;
line-height:27px;
display:block;
float:left;
height:27px;
width:200px;
}
Yes, you can.
I was able to set the height of my SELECT to exactly what I wanted in IE8 and 9. The trick is to set the box-sizing property to content-box. Doing so will set the content area of the SELECT to the height, but keep in mind that margin, border and padding values will not be calculated in the width/height of the SELECT, so adjust those values accordingly.
select {
display: block;
padding: 6px 4px;
-moz-box-sizing: content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
height: 15px;
}
Here is a working jsFiddle. Would you mind confirming and marking the appropriate answer?
Use a UI library, like jquery or yui, that provides an alternative to the native SELECT element, typically as part of the implementation of a combo box.
Even though setting a CSS height value to the select element does not work, the padding attribute works alright. Setting a top and bottom padding will make your select element look taller.
Finally found in http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html
a simple solution (at least for IE8):
font-size: 1.0em;
BTW, for Google Chrome, found this workaround at
How to standardize the height of a select box between Chrome and Firefox? */
-webkit-appearance: menulist-button;
There is a work-around for this (at least for multi-select):
set select size attribute to option list size (use JavaScript or set it to any large enough number)
set select max-height instead of height attribute to desired height (tested on IE9)
You can use a replacement: jQuery Chosen. It looks pretty awesome.
select{
*zoom: 1.6;
*font-size: 9px;
}
If you change properties, size of select will change also in IE7.
See also inconsistent box model between input, select, ...
you could do similar to what facebook does, just add padding around. It is not as good as one could wish but looks reasonably well.
Not sure but I think this was a question not about the height of a 'multiple' type of select element but a drop-down type of select element. I have come across times when the drop-down looks squashed and does not show clearly the selected value. Undoubtedly it has to do with CSS style info in use on the page. The only way to stop it is either change the CSS (which would likely affect the whole page or parts of it in ways you don't want affected) or use style info in the select element itself to override the CSS that's clobbering it. Example:
<select name="myselect" id="myselect" style="font-size:15px; height:30px">
<option value="someval">somedescr</option>
...
</select>
Hope this helps.
i wanted to set the height of the select box to be smaller than the default. i used
select {
position: relative;
height: 10px !important;
display: inline-block;
}
this works on ie7 and ie8. you might only need the height property, i just added the position and display to override properties inherited from higher up the dom.