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;
}
Related
I have a default bootstrap user select box, where I apply a border-radius style:
<div class="container">
<select class="form-control" style="border-radius: 1rem;">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
<option value="5">User 5</option>
</select>
</div>
So, I decided to update this select to use the jQuery lib select2 to get the searching feature, but I lost the border-radius formatting.
<div class="container">
<select class="form-control js-example-basic-single" style="border-radius: 1rem;">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
<option value="5">User 5</option>
</select>
</div>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
There is any way to apply border-radius when I use select2 in my select boxes?
Select2 append another element after the original select so if you want to style it, you can target it with .select2-container .select2-selection. For more specific, if you want to style only select2 of .js-example-basic-single, the selector will be .js-example-basic-single + .select2-container .select2-selection.
Working Fiddle
I'm trying to use css to style a select/option html element so that they display as a small list of button with the selected option being highlighted instead of the traditional dropdown menu.
I would've simply rewritten the entire thing, but i am editing a shopify theme, and there are too many implications of such change, some of them are above my "pay-grade" let's say, so i am trying to use the easy way out of just restyling it using css to get the desired result
I have done this before like this, but it doesn't work on mobile devices such as iOS.
#foo {
overflow: auto;
height: 2.4em;
border: 0;
}
#foo option {
display: inline-block;
margin: 0 .3em;
}
#foo option:checked {
font-weight: bold;
}
<select multiple="multiple" name="foo[]" id="foo" size="5">
<option value="1" selected="selected">Foo 1</option>
<option value="2">Foo 2</option>
<option value="3">Foo 3</option>
<option value="4">Foo 4</option>
<option value="5">Foo 5</option>
<option value="6">Foo 6</option>
<option value="7" selected="selected">Foo 7</option>
</select>
Sounds like <select multiple> might be closer to what you're looking for. Learn more here: https://www.w3schools.com/tags/att_select_multiple.asp
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>
I have a multiple select input with a min-width set on the select element. The options are not taking up the full width of the available select box in Internet Explorer 9.
The items take up the full width on Chrome and Firefox. How do I make the option elements take the full width of the select input?
Notice the Saab item here in Internet Explorer:
This Fiddle demonstrates the issue
<select style="min-width: 150px; width: auto;" name="cars" multiple>
<option value="volvo" style="width: 100%;">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
It works correctly in Chrome:
To my knowledge, you can't give OPTION a block layout in IE. It will expand only to the width of its content, I don't believe you can fiddle with its width. You can, as you've demonstrated, adjust the width of the SELECT element without issue.
I tested it out in some odd way it dont understand your auto width on the select - but if you just set it to a pixel size you will get a full width marker on it:
See it here FIDDLE
The code:
<form action="form_action.asp">
<select style="min-width: 150px; width: 1px;" name="cars" multiple>
<option value="volvo" style="width: 100%;">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
I ended up setting the css width attribute to 100% for both the select and option, and then the select items filled up the full width:
Demo Fiddle
<body>
<form action="form_action.asp">
<select style="min-width: 150px; width: 100%;" name="cars" multiple>
<option value="volvo" style="width: 100%;">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
<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/