The problem is I can't change the height of the drop down box in html.for (select->option) I try to apply the style in CSS. It does not works
You can not control the style of option. (see here:https://css-tricks.com/dropdown-default-styling/)
however you can change the font-size and the option will grow
select option{
font-size: 20px;
}
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
It is not possible to change height of 'option'
Only you can change the background-color and color of the 'option' values
You can change the 'select' element height.
You just need to use the height CSS attribute for the select tag.
label select {
height: 100px;
}
<label>
<select>
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</label>
<select style="min-height:40px;min-width:100px;">
<option value="">Select1</option>
<option value="">Select2</option>
<option value="">Select3</option>
</select>
You can style the select and option elements usign CSS like this:
select {
height: 200px;
color: red;
}
option {
color: green;
}
Notice that you have to remove the "." before select and option.
This will overwrite any select and option element.
EDIT:
You can also refer to a certain select element by giving to that element a class name, like this:
select.s1{
height: 100px;
}
select.s2{
height: 150px;
}
<select class="s1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="s2">
<option value="fiat">Fiat</option>
<option value="ferrari">Ferrari</option>
<option value="alfaromeo>Alfa Romeo</option>
<option value="lancia">Lancia</option>
</select>
Related
I use this code to init a select:
select {
border: none;
}
<select>
<option>Select a product</option>
<option>Product 1</option>
<option>Product 2</option>
<option>Product 3</option>
</select>
But I wanna change the postion of option like this:
How could I do that? Thanks for any help.
It is not possible with native select.
You can read more about it at MDN - Why is styling form widgets challenging?, The Ugly.
You can hide first option but user won't be able to select it again anymore.
select option:first-child {
display: none;
}
<select>
<option selected>Select a product</option>
<option>Product 1</option>
<option>Product 2</option>
<option>Product 3</option>
</select>
How can I change the 2nd child of the option select with id "order" to green? The code I have below applies to all option select which is not preferable based on what I need. Is this doable?
<style>
select option:nth-of-type(2){
color: green;
}
</style>
<select id="order"/>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select id="type"/>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
You can either do this and assign your CSS classes manually
option.colored {
color: red;
}
<select>
<option>Option 1</option>
<option class="colored">Option 2</option>
<option>Option 3</option>
</select>
Or you can do this, have every :nth item colored in a specific list
.coloredOption option:nth-child(2n+2) {
color: red;
}
<select class="coloredOption">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
If you want to customize any types of check boxes(including select/options). We usually create divs that are look like we want and we tie this divs with our select/checkboxes with help of JavaScript
I have the following code and I want to hide the last option of the select box ie option - 3
select[name="test"]:not(optgroup) option:last-child {
display: none;
}
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
But the above CSS code doesn't work.
Any help is highly appreciated. Thanks in advance.
see my attempt below
select option[value=three] {
display: none;
}
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
Basically what you want is to hide the last direct option child of the select element:
select > option:last-child { display: none; }
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
Just a small edit on your CSS. :)
select[name="test"] > option:last-child { display: none;}
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
You can also use the value selector like this:
option[value="three"] {
display: none;
}
<select name="test">
<option value="one">1</option>
<optgroup label="emails">
<option value="two">2</option>
</optgroup>
<option value="three">3</option>
</select>
How to solve problem that select attribute size, like in code:
<select size="2">
<option value="0" selected="selected">Default</option>
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>
How can I get it working in Chrome and Safari?
This is a known bug in webkit browsers.
The simplest way to get it to work just how you like it in Chrome and Safari would be to manually specify the styling the select itself.
Here is a working jsFiddle.
select {
height: 36px;
font-size: 14px;
}
<select size="2">
<option value="0" selected="selected">Default</option>
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>
Include height: auto and it should work.
<select size="2" style="height: auto">
<option value="0" selected="selected">Default</option>
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>
I use the size attribute in the HTML for "other" browsers and then specify webkit appearance in CSS. Other types of menu list options are available, textfield is not the only one. And you may need to mess with height based on font size. This makes it look about the same on all browsers.
CSS
select{
-webkit-appearance: menulist-textfield;
height: 45px;
}
I was able to fix this problem by adding the "multiple" option to the select tag.
Try using the css property width of the select tag :
select {
width:value px;
}
<select multiple="multiple" size="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
If there is no option available, it shrinks and looks bad. Is there any attribute where I can specify the default length?
You can give it a width via CSS, for example:
<select multiple="multiple" size="2" style="width: 200px;">
You can test it out here.
you can use CSS to specify a width and height, so that no matter what options are available, the size of the select element stays the same:
select { width: 12em; height: 6em }
sample:
http://jsfiddle.net/3PQ92/
http://jsfiddle.net/3PQ92/1/
http://jsfiddle.net/3PQ92/2/