Setting the height of a SELECT in IE - html

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.

Related

Option in select will be same width with the select css

This question shares my problem, I tried the answer but it didn't work
#SelectBoxid {
width:150px;
}
#SelectBoxid option{
width:150px;
}
Any way to make the option same width as select and if there is more text it can be just ...
UPDATE
Pure css as much as possible no jquery..
FIDDLE
After doing some research, I don't think it's possible to control option's width without javascript. Its width depends on browser implementation.
There isn't a way to control this width in HTML standards.
http://www.w3.org/TR/html-markup/option.html#option
And support for CSS on form controls is rather weak.
This style is useless. It doesn't control option at all. If options are all short, then options' width are the same as select even you set width to 100px. If any option is wider than select, then options' width are the same as the widest option. (at least in Chrome)
#category option {
width:173px; // not works at all
}

Increase gap between select menu options

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

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

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/

How can I add padding to html dropdownlist?

I want to add padding to the options of html "select" tag.
I try to add it in the style property of "select" and "option" and it doesn't work in IE.
What can I do?
OK, I hate to sound all 1990s, but would simply pre- and app-ending a space to the option text be acceptable for your desired goals?
It is difficult to style a drop down box cross browser. To get any sort of control, you'll need to code a replacement one in JavaScript. Be warned, however:
Remember that the user may have difficulty using your drop down - take usabilty into account
Replace a select element with JS - this is an accessibility issue (and also allows users without JS support to use the form input)
The following works, in FF3+ and Midori (and presumably other Webkit browsers):
select
{width: 14em;
margin: 0 1em;
text-indent: 1em;
line-height: 2em;}
select * {width: 14em;
padding: 0 1em;
text-indent: 0;
line-height: 2em;}
The width is to allow enough room in the displayed select box when not active, the margin does what it always does, text-indent is used to feign padding between the left boundary of the select box and the inner-text. line-height is just to allow vertical spacing.
I can't comment on its use in IE, I'm afraid, so if anyone could feed back -or adapt- to suit that'd be good.
It's worth noting that the drop-down part of the select (select *) isn't affected outside of FF3 for me, for whatever reason, so if that was the question you wanted answering, I apologise for offering nothing new.
Demo at: http://davidrhysthomas.co.uk/so/select-styling.html
Create a class for the SELECT
.listBox{
width: 200px;
...etc
}
Now define the Css for the options of the SELECT
.listBox option{
padding:4px;
...etc
}
Tested on IE 10
CSS:
option{
padding: 0.5em;
}
I couldnt get this to work with padding or spacing for some reason. I went with a jQuery solution that looks like this:
$(document).click(function(){
$('#selector option').each(function(){
$(this).html(" "+$(this).text());
});
});