How to style the option's position of an html “select” element? - html

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>

Related

How do I change the background color of the main cell of a html dropdown?

To put it very simple, I want to change the background color of the main field (not sure what else to call it, it's the field marked in red in the example) of a HTML element. I do not want to change the background color of the dropdown fields.
Is this possible? If so, how?
Source code:
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
You can use css selectors: select and select option (I put red for options, but you can change color to whatever you like)
select {
background-color: yellow;
}
select option {
background-color: red;
}
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
One way would be to style de select and the option
option{
background-color: white;
}
select {
background-color: yellow;
}
<select>
<option value="3">tewe</option>
<option value="8">eerer</option>
<option value="5">ererere</option>
</select>

How to apply border-radius on select2 boxes?

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

how to change height to drop down box in html?

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>

How to change font color of the option select of specific divs?

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

Select size attribute size not working in Chrome/Safari?

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;
}