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());
});
});
Related
I need to have the options of an html select (with option "size" so to visualize it like a 5 lines textarea) showing side by side, like in this jfiddle
jsfiddle
I could achieve my goal using this css
select {
width: 100%;
}
select#myselect option {
width: 6%;
float: left;
border: 1px solid;
text-align: -webkit-center;
border-color: darkgray;
}
but it's working perfectly only on chrome. In firefox the option "float:left" seem not to work and the options are showed one under the other. In Safari the option "width:6%" is not working and the option element occupies 100% of the width of the select. Neither the border is working, but this is less important
It is possible to achieve the same chrome result in all browser?
EDIT: adding "display:inline" to the options show them side by side on firefox but all go on one single line, resulting in the last elements not to show at all, like in this jsfiddle
Jsfiddle
Add display: inline; to the css.
Safari doesn't support the inline and inline-block nore the left floating for <option> and, i think, with good reasons: first, cause the <select><option> is not ment to work in that way and, secoundary, cause the display:inline is totally incompatible with the iphone rendering of the element itself;
cause this, also the possibility of controlling the with of the element is not supported.
I have two types of input. A select dropdown box, and a regular input.
On the input, I have added a padding: 10px; that makes it look big.
The issue is once I put the select box beside it, they are both different heights.
How do I either apply the padding to the select, or make it the same height as the input.
Here is a live example.
Edit 1
This is how it looks to me:
Try adding -webkit-appearance: none at least to the <select> but possibly to both. OSX really wants their controls to look apple-y
Add this attribute to the select element:
-webkit-appearance: menulist-button;
Check this answer for more details: https://stackoverflow.com/a/3075922
Is there a way to remove CSS styles from an submit button so that the default browser style is applied?
You can set the styles to the system values,
input.overridecss {
background-color: ButtonFace;
color:ButtonText;
}
jsFiddle
Here is a list of values you can override, there is probably a better list but I'm lazy.
[Edit] Here is the Specification which has been deprecated lol,
so here is the correct way I guess,
input[type=button] {
appearance:push-button; /* expected from UA defaults */
}
from Appearence
You can do something like this:
button {
padding:0;
margin:0;
border:0;
background-color:transparent;
}
Hows that?
Store styles that you're applying programatically in a CSS class. When you want to go back to default remove the class.
Well, if you dont mind to use jQuery, you can use following code to remove all styles and classes from submit buttons.
$('input[type="submit"]').removeClass();
$('input[type="submit"]').removeAttr("style");
This will remove all classes as well as inline styles, thus system default button style will be applied to your all submit buttons.
I found that because I had:
* { border: 0; padding: 0; }
etc etc.
in my code which affects submit buttons so I put this is instead:
*:not(input) { border: 0; padding: 0; } etc etc.
This seemed to fix it.
If you're DEVELOPING the site - just remove the rules from the CSS file.
If you so wanted to, you could use Javascript/JQuery to remove/reset them based on some sort of condition if thats what you're looking for, ie:
$("#myButton").css("background","");
And so on...
If you're USING the site, but didn't build it - then you can (depending on your browser - i'm looking at Firefox 4) disable all or partial CSS from rendering using the web developer toolbar options... but I don't know if you can apply that as the 'default' setting for every site you load.
If you go to the first blog item (Mona) and expand it using the '+' icon. The image thumbnails are aligned 24px from the left using a margin. This works in every browser but IE7 which ignores the margin on the first list item.
http://www.dririser.co.uk/index.php
CSS
.artistMeta li {
float: left;
margin: 0 0 24px 24px;
position: relative;
width: 160px;
}
There is a similar question on here but the there was no real answer and I can't use their solution.
Why is ie7 ignoring the left-margin on my first list item (only)?
Any ideas?
just a quick test.. not sure if it will work.. but try adding a display:block on your li and don't use the shorthand for the margin, instead use margin-left and margin-bottom...
it seems to me that IE is not refreshing the style of the elements, because when i inspect the elements, the navigator adds the correct margins...
If that doesn't work.. you might want to put the style inside the tag (since you're using JS to add the images), i know it's not elegant, but i guess that could force the navigator to set the style on the li
and if that doesn't work.. then i've no idea what could be wrong =P. I hope this helps...
Good Luck!
The problem IE7 is having here isn't in your CSS file, it's in your javascript in global.js. Specifically the following line ...
$(".artistMeta > li:nth-child(3n+1)").addClass("articleSlideOdd");
As per the convention in CSS, JQuery starts the child count at 1 for nth-child (as in the first child is nth-child(1)), where as, ie7 is expecting it to start at 0. So with ie7 3n+1 matches the 2nd, 5th, 8th item and so on.
Looks like JQuery isn't handling ie7 properly, so you'll need two statements to cover ie7, and everything else.
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.