How to control the width of select tag?
USE style="max-width:90%;"
<select name=countries style="max-width:90%;">
<option value=af>Afghanistan</option>
<option value=ax>Åland Islands</option>
...
<option value=gs>South Georgia and the South Sandwich Islands</option>
...
</select>
LIVE DEMO
How can I set the width of HTML select element, without considering the width of each option
you should use width
attribute instead of max-width
.
correct your code to below sample:
<select class="form-control"style="width:150px">
<option value="1">option 1 </option>
<option value="2">option 2sdsdsdsd</option>
<option value="3">option 3</option>
</select>
How can change width of dropdown list?
Try this code:
<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
CSS:
#wgtmsr{
width:150px;
}
If you want to change the width of the option you can do this in your css:
#wgtmsr option{
width:150px;
}
Maybe you have a conflict in your css rules that override the width of your select
DEMO
How to make select elements shrink to max-width percent style within fieldset
The problem
This isn't possible, at least if you only use max-width
(see below for solution). <select>
s are always a little bit tricky to style, as they're interactive content elements and form control elements. As such, they have to follow some implicit rules. For one, you cannot make a select less wide than one of its options when using max-width
. Think of the following scenario:
+------------------------------------+-+
|Another entry |v|
+------------------------------------+-+
|Another entry |
|Select box, select anything, please |
|Another entry |
|Another entry |
+------------------------------------+-+
Let's say that you want to squeeze this <select>
- what will happen? The select's width will get lesser, until...
+------------------------------------+-+ +-----------------------------------+-+
|Another entry |v| |Another entry |v|
+------------------------------------+-+ +-----------------------------------+-+
|Another entry | |Another entry |
|Select box, select anything, please |-->|Select box, select anything, please |
|Another entry | |Another entry |
|Another entry | |Another entry |
+------------------------------------+-+ +-----------------------------------+-+
|
+---------------------------------------+
v
+----------------------------------+-+ +---------------------------------+-+
|Another entry |v| |Another entry |v|
+----------------------------------+-+ +---------------------------------+-+
|Another entry | |Another entry |
|Select box, select anything, please |-->|Select box, select anything, please|
|Another entry | |Another entry |
|Another entry | |Another entry |
+----------------------------------+-+ +---------------------------------+-+
And then the process will stop, as the <option>
s wouldn't fit anymore. Keep in mind that you can't style <option>s
or at least only a little bit (color, font-variant) without getting some nasty quirks. However, the border-box can be changed, if the select is prepared correctly:
The solution
Use a width
value on the select
. Yep, it's easy as that:
<fieldset style="background:blue;">
<select name=countries style="width:100%;max-width:90%;">
<option value=gs>South Georgia and the South Sandwich Islands</option>
</select>
</fieldset>
Why does this work? Because the option
will now recognize the width
of the select
correctly and won't force the select
to have a implicit min-width
. Notice that the width
is absurd, as it is more than the max-width
. Most browsers won't care and use the max-width
in this case, as it provides an upper bound.
JSFiddle Demo (works in FF12, Chrome 18, IE9, Opera 11.60)
Edit
Wrapper based solution, this won't change the original width:
<fieldset style="background:blue;">
<div style="display:inline-block;max-width:90%;"> <!-- additional wrapper -->
<select name=countries style="width:100%">
<option value=gs>South Georgia and the South Sandwich Islands</option>
</select>
</div>
</fieldset>
JSFiddle Demo (works in browsers listed above)
Change width of select tag in Twitter Bootstrap
This works for me to reduce select tag's width;
<select id ="Select1" class="input-small">
You can use any one of these classes;
class="input-small"
class="input-medium"
class="input-large"
class="input-xlarge"
class="input-xxlarge"
Related Topics
Elements in a Flex Container Are Not Wrapping
Make Grid Items Fill Columns Not Rows
CSS Grids: Align Square Cells with Container Edges with Consistent Grid Gap
Best Practice for Using Svg Images
Flipping/Inverting/Mirroring Text Using CSS Only
Link External CSS File Only for Specific Div
How to Style Input File Textbox
CSS How to Make <Td> a Fixed Height
Overlap Border of Parent with H2 Margin Negative
Vertically Center Text in a 100% Height Div
Are Nested Span Tags Ok in Xhtml
Page Height to 100% of Viewport
What's The Key Difference Between HTML 4 and HTML 5