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
}
Related
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; }
I've been trying unsuccessfully to set an HTML "select" field size in Bootstrap 3(latest) to normal (not 100% width). Do you know an elegant way of doing this, without hacks like tables around fields.
I also don't want to put a select field in a bootstrap column since then I'll have indent due to borders.
Custom styles with specific sizes is also not pretty in my opinion, because all I want is for the field to be only as long as the longest content (default behavior of a select)
Perhaps there is a really easy way to circumvent this since Bootstrap decided to make all selects (using form-control class) stretch all the way, looking forward to your illuminating suggestions )
Try setting the width to auto or initial?
width: auto;
or
width:initial;
http://www.w3schools.com/cssref/pr_dim_width.asp
select
{
width: auto;
width: inherit;
}
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com
I have a form where depending on the website's brand one of two input fields should be visible at one given spot.
I figured I just put both input fields in the same container and then through my stylesheet set one of them to display:none;
This does hide the field, but it still makes it take up space.
I also tried setting the height and width to 0 or setting visibility to hidden or collapse but none of those worked.
Untill now all the branding things could be done with css style sheets so I would like to keep it that way.
The solution should at least be supported in IE6 & up, Firefox 2 & up and Chrome (latest).
why don't you use input type="hidden" ?
What about setting the invisible input field to position: absolute; which should take it out of the rendering flow.
However, setting it to display: none should in theory do the same...
<style>
.hideme
{
display:none;
visibility:hidden;
}
.showme
{
display:inline;
visibility:visible;
}
</style>
<input type="text" name="mytext" class="hideme">
You can either set class="hideme" to hide your control or class="showme" to show your control. You can set this toggeling using JavaScript or server side coding.
This does hide the field, but it still
makes it take up space.
This shouldn't happen; display: none should cause the element to not be included in the flow. Check the rest of your CSS (try using Firebug to figure out where the extra "space", which is probably just padding or margin of some surrounding element, is coming from).
Using the visibility property takes up rendering space even if the element is not visible. Instead of using visivility you have to use display property.
You can set the display to none if you want to hide the element and display to block or inline if you want to show them.
To have a look on display check this
If setting your display property doesn't solve your problem, then I think the textboxes might be absolutely positioned. It might be the reason for the layout not to be changed.
Can you please post the complete code?
You can do this if you want to isolate the css code from other input:
input[type="checkbox"] {
display: none;
}
You can also further isolate it from the same type by indicating another class.
I'm not too familiar with CSS, but you can try implementing JQuery which combines Javascript and CSS to let you do stuff like that with relative ease.
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.