I have this:
<select name="idx" id="search-field_0">
<option value="kw">Keyword</option>
<option value="su,wrdl">Subject</option>
<option value="ti">Title</option>
<option value="au,wrdl">Author</option>
<option value="pb,wrdl">Publisher</option>
<option value="pl,wrdl">Publisher location</option>
<option value="nb">ISBN</option>
<option value="bc">Barcode</option>
</select>
I want to change its highlight background to green. How will I do this , without converting my
tag to any form.Any idea?
I'm not sure you can really change this with pure css. this is browser / operating system defined colors. You can do something a little hackier and make a custom dropdown using divs. or maybe you can find some javascript library to handle this..
I doubt there is something for the option highlight you're specifically asking for.
Turns out there are multiple questions like this all over SO, although here is a good explanation by this one:
Well you cannot change the hover color of select option as it is rendered by Operating System instead of HTML
Related
I want to hide one of the dropdown options from a form I'm using. I want to keep the element in the form, as the form is doing some calculations based on user inputs and if I take out the option from the form it breaks the calculation, so I'd just like to hide it from users so it's still in the form but not visible to users.
I have inspected the area on the form and this is the code. I want to hide the word Liverpool.
<select class="iphorm-element-select iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
<option value="Liverpool">Liverpool</option>
<option value="Shrewsbury">Shrewsbury</option>
</select>
If you are working in an environment that supports HTML5, you can use the hidden attribute on the option to hide it.
Note that in order for that to work, it can't be the first option (otherwise it will default to that one).
See this working snippet:
<select class="iphorm-element-select iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
<option value="-">Choose an option</option>
<option value="Liverpool" hidden>Liverpool</option>
<option value="Shrewsbury">Shrewsbury</option>
</select>
Following OP Comment About Editing Existing HTML
OP has stated:
The issue I will probably face is that the html is generated by a
plugin that creates the form, so I can't add that attribute. I was
hoping to add a css rule to stop it displaying
Given this circumstance, the CSS property visibility could be used to control whether the option is visible, as per the following snippet:
select > option:nth-of-type(2) {
visibility: hidden;
}
<select class="iphorm-element-select iphorm_16_25 select2-hidden-accessible" name="iphorm_16_25" id="iphorm_16_25_5e32cecc9b3f6" tabindex="-1" aria-hidden="true">
<option value="-">Choose an option</option>
<option value="Liverpool">Liverpool</option>
<option value="Shrewsbury">Shrewsbury</option>
</select>
However, this has the unfortunate side-effect of leaving a hole in the select list as opposed to hiding it completely. It does, however, prevent that option from being displayed or chosen.
Kindly read my Note Points as my main problem exists there only.
As I am using a normal tag in html.
Code as follows:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Here, as we all know that the values on hover, the color that comes by default is blue (i.e. a system color) But I want a color other than blue.
Note:
1. It should work mainly in the Chrome browser.
2. Avoid JavaScript/jquery code.
Thanks in advance pals !!!
Changing <select> highlight color
Changing the blue color on the options is not possible using css
I would like to know if is possible to style the dropdown with options that comes from Select.
I am looking for many days, tried some css and some jquery solutions but none work properly in osclass, in item-post.php, when we select category + subcategory.
As you can see in the image, the dropdown is misplaced, covering the actual title. In Firefox works ok, like a usual dropdown.
The code is usual
<select name="cars">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
So, can we force the dropdown with the options show beneath the select like in firefox or any dropdown? Thanks
guys could you please help me with this. I'm using chosen.js and have a problem with dropdowns, please see the picture problem with dropdowns
This is the html code
<select id="SelectedInterval" class="chosen_select" name="SelectedInterval">
<option value="3m">3 months</option>
<option value="6m">6 months</option>
<option value="9m" selected="selected">9 months</option>
<option value="1y">1 year</option>
<option value="2y">2 years</option>
</select>
And I'm using standard chosen.css
Figured out how to fix this thanks to: enter link description here
The key think is that "It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts."
So I put my dive to have bigger z index than the div below
I added a css class to options in a select dropdown box for indention,
<select id="users" name="users">
<option value="[1,2,3]">Devs team</option>
<option value="1" class="member">user1</option>
<option value="2" class="member">user2</option>
<option value="3" class="member">user3</option>
</select>
It shows correctly on Firefox but not on Chrome. :(
Hope you guys could help me with this little problem.
You cannot reliably style select and option elements. Browsers typically like to stick to the OS defaults for these elements.
If you are looking to pad .member because they are children of the Devs Team, you may want to look at the OPTGROUP tag: http://www.w3schools.com/tags/tag_optgroup.asp
Found the answer. Sadly chrome doesn't support giving styles to option.