I'm trying to style a select box, changing all of the color options to red. However, when I load the webpage the select box still has color black. Any help please?
Here is the HTML & CSS:
select.selector option {
color: red;
}
<select style="font-size: 16px; padding: 4px;" name="category" id="categoryselector" class="selector">
<option disabled></option>
<option value='all'>all</option>
<option disabled></option>
<option>Hardware and OS</option>
</select>
And here is a JSFiddle
Select option styling doesn't work in Chrome (MAC OS X), but it will work in Firefox on all systems as well as Chrome (Windows 7).
You can check the detailed description here: Dealing with the select nightmare
You're applying the color to the options within the select box. To apply it to the visible select box, use:
select.selector{
color:red;
}
Please, try this code:
select option {
background: rgba(0,0,0,0.3);
color:red;
}
Related
I use a select in datalist. But I have an issue. When my datalist show in the top of input, I cannot scroll in my datalist. But it doesn't occur when datalist in the bottom.
Here's my code:
<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}"
ng-model="icon.name"
list="classIcon"
id="searchIcon"
ng-change="changeFn(icon.name)">
<datalist id="classIcon" class="scroll" >
<select class="selectIcon">
<option ng-repeat="icon in classService.classesAwesome "
value="{{icon}}"
ng-bind-html="icon | highlight: $parent.icon.name ">
<i class="{{icon}}"></i>
<span ng-bind-html="icon | highlight: $parent.icon.name "></span>
</option>
</select>
</datalist>
You should add this code to your CSS.
.dropdown1 {
width:290px;
overflow:scroll;
height: 20px;
}
I know this is old but I was looking for a way to do this and found a simple solution to make it always sit below the input field.
I just customised the actual html element in the CCS like this:
datalist {
position: absolute;
}
I have tested this in Chrome, Mozilla and Edge.
I did find that the issue only really appeared in chrome and it was to do with the list size and screen width dimension as to whether it appeared at the side or above or below.
I've got a select menu that has a given font applied to it. In the code its called 'WebSymbolsRegular'. Now I'm looking to have just the first menu item not have this font applied to it. I'm using jquery mobile and I've managed to change the font of the first element when its displayed in the select BUT I am unable to change the font of first element in the drop down, see picture:
So the 'Please select a condition rating' is perfect but as you can see in the drop down the 'WebSymbolsRegular' takes over and I get gibberish. I would like to change this. Here is the code I have:
CSS:
.stars .ui-btn-inner
{
font-family: 'WebSymbolsRegular';
color: #eab92d;
}
.stars .ui-btn-inner .firstitem
{
font-family: 'Lato' !important;
color: white;
}
.firstitem
{
font-family: 'Lato' !important;
}
The .ui-btn-inner is needed beacause jquery mobile adds its own mark up to the element.
HTML:
<span class="stars">
<select id="AddbookConditionSelect" style="color: #eab92d; font-family: WebSymbolsRegular;">
<option value="0" class="firstitem">Please select a condition rating</option>
<option value="1">R</option>
<option value="2">RR</option>
<option value="3">RRR</option>
<option value="4">RRRR</option>
<option value="5">RRRRR</option>
</select>
</span>
The reason for using R's is because the 'WebSymbolsRegular' font changes this to stars which is the desired effect. Any ideas on how I can change the drop's first time font to read properly?
In jQuery Mobile you have the option to use the non native select menu:
<span class="stars">
<select id="AddbookConditionSelect" data-native-menu="false" >
<option>Please select a condition rating</option>
<option value="1" class="staritem">R</option>
<option value="2" class="staritem">RR</option>
<option value="3" class="staritem">RRR</option>
<option value="4" class="staritem">RRRR</option>
<option value="5" class="staritem">RRRRR</option>
</select>
</span>
The first option with no value is automatically treated as a placeholder and popup title, so you are left with pretty simple CSS to style the star options which can appea in a popup, a dialog and the selected text of the select:
#AddbookConditionSelect-listbox li a, #AddbookConditionSelect-menu li a, .staritem{
font-family: WebSymbols-Regular;
color: #eab92d;
}
#AddbookConditionSelect-button {
font-family: 'Lato', sans-serif ;
}
Here is a working DEMO
The problem is your inline style that will overrule anything in CSS files including !important statements. Now you may want to try the CSS3 pseudo-selector :first-child and drop the "firstitem" class. I would do it like that (I kept your HTML although I would rather give a "stars" class to your select element than using an extra span):
HTML
<span class="stars">
<select id="AddbookConditionSelect">
<option value="0">Please select a condition rating</option>
<option value="1">R</option>
<option value="2">RR</option>
<option value="3">RRR</option>
<option value="4">RRRR</option>
<option value="5">RRRRR</option>
</select>
</span>
CSS
.stars option { font-family: 'WebSymbolsRegular'; color: #eab92d; }
.stars option:first-child {font-family: 'Lato';}
Note that if you need to support older browsers, you can just leave your "firstitem" class where it is and replace the second line of CSS by this one :
.stars option.firstitem {font-family: 'Lato';}
So, based on what you've provided, I noticed that there is an inline styling:
<select id="AddbookConditionSelect" style="color: #eab92d; font-family: WebSymbolsRegular;">
When there is inline styling, it overrules any other styling.
You can try by removing that, and then place in CSS:
#AddbookConditionSelect select {
font-family: 'Lato';
}
#AddbookConditionSelect select:not(:first-child) {
font-family: 'WebSymbolsRegular';
}
I have a listbox and I want to decrease its width.
Here is my code:
<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
<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>
This code works on IE 6 but not in Mozilla Firefox (latest version). Can anybody please tell me how I can decrease the width of the dropdown list on Firefox?
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
The dropdown width itself cannot be set. It's width depend on the option-values. See also here ( jsfiddle.net/LgS3C/ )
How the select box looks like is also depending on your browser.
You can build your own control or use Select2
https://select2.org
This:
<select style="width: XXXpx;">
XXX = Any Number
Works great in Google Chrome v70.0.3538.110
try the !important argument to make sure the CSS is not conflicting with any other styles you have specified. Also using a reset.css is good before you add your own styles.
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
or
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
Create a css and set the value style="width:50px;" in css code. Call the class of CSS in the drop down list. Then it will work.
If you want to control the width of the list that drops down, you can do it as follows.
CSS
#wgtmsr option {
width: 50px;
}
You can style it on your CSS file using the id = #wgtmsr.
#wgtmsr{
width: 50px;
}
And then remove the style element = 'style="width: 50px;"'
The following code produces a listbox with 2 options:
<select size="10">
<option>1</option>
<option>2</option>
</select>
Is it possible to always show a vertical scrollbar in this listbox?
I'm asking this question because style="overflow-y: scroll;" doesn't work here in IE7.
It will work in IE7. But here you need to fixed the size less than the number of option and not use overflow-y:scroll. In your example you have 2 option but you set size=10, which will not work.
Suppose your select has 10 option, then fixed size=9.
Here, in your code reference you used height:100px with size:2. I remove the height css, because its not necessary and change the size:5 and it works fine.
Here is your modified code from jsfiddle:
<select size="5" style="width:100px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
this will generate a larger select box than size:2 create.In case of small size the select box will not display the scrollbar,you have to check with appropriate size quantity.Without scrollbar it will work if click on the upper and lower icons of scrollbar.I show both example in your fiddle with size:2 and size greater than 2(e.g: 3,5).
Here is your desired result. I think this will help you:
CSS
.wrapper{
border: 1px dashed red;
height: 150px;
overflow-x: hidden;
overflow-y: scroll;
width: 150px;
}
.wrapper .selection{
width:150px;
border:1px solid #ccc
}
HTML
<div class="wrapper">
<select size="15" class="selection">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</div>
I guess you cant, this maybe a limitation or not included in the IE browser. I have tried your jsfiddle with IE6-8 and all of it doesn't show the scrollbar and not sure with IE9. While in FF and chrome the scrollbar is shown. I also want to see how to do it in IE if possible.
If you really want to show the scrollbar, you can add a fake scrollbar. If you are familiar with some of the js library which use in RIA. Like in jquery/dojo some of the select is editable, because it is a combination of textbox + select or it can also be a textbox + div.
As an example, see it here a JavaScript that make select like editable.
add:
overflow-y: scroll
in your css bud.
Is it Possible to keep the background-image for drop down box using CSS.
For Textbox is getting correctly.
can anybody give sample example
Yes is possible. You can style the elements not the select box, as the select box gives only the line when you selected something.
try this css:
<style>
.green { background:green}
.red { background:red}
.blue{background:blue}
</style>
and this html:
<form>
<select class='green'>
<option class='red'>A</option>
<option class='blue'>B</option>
</select>
</form>
You will see that the main line is green and the options are colored each one to its colour. You can also attach images to the background for each css class.
Here you go
<select>
<option>One</option>
<option>Two</option>
<option>More ... </option>
</select>
css
select {
background: url("https://fastly.picsum.photos/id/1031/200/300.jpg?hmac=HVS-5o6kRugo6EcoZhPEsxm8Jnl7-J5tuEc20pN029c") repeat-x 0 0;
}