When the user of my site clicks on a select box, the colour of the window with the select options matches the body's colour, but I want to change this colour. For instance this code in CSS only affects the input box and not the smaller "window" that shows the options in the dropdown:
select {
background-color: aliceblue;
}
Is there a quick workaround for this or do I have to customize with jquery or some other UI.
<select> is notoriously unfriendly to CSS modifications and if your goal is to change how the selection dropdown or arrow look ( or in many cases the size of the box ) you'll have to rely on a JS solution that replaces <select> entirely.
Some alternatives:
https://select2.github.io (jQuery solution)
https://silviomoreto.github.io/bootstrap-select/ (Bootstrap solution)
You can style the background-color of a "select tag window" if you apply it to the option elements:
select option {
background-color: blue;
color: white;
}
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Obviously this solution is unfotunately not working in all browsers...
If I understand you correctly, you need to change the background colour of an <option> element. Here is some example code that does that:
HTML:
<select name="" id="">
<option value="">First</option>
<option value="">Second</option>
<option value="">Third</option>
</select>
CSS:
select, option {
background-color: red;
}
https://jsfiddle.net/4h99eznb/
Related
I have a normal Html Select control with following options:
<form action="/target.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" style="width: 100px; overflow-x: auto;" multiple>
<option value="volvo">Long select option.</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
The first option in the list is a bit longer that the rest. When I select it, I can see the following effect:
However, as I use the horizontal scrollbar to see the rest of the value it appears something as in the image below:
The text on the right are all lost (say both foreground and background are while). Now, I click somewhere outside the Select control, the text appears but half of them selected and rest not.
I tried this with different online html editor and all of them share same behaviour. Is there a way (any css) that I can apply so that once an option is clicked/selected the entire option is selected and not just a portion of it.
The below code is a bit hacky, but it will serve the purpose. You can add the below CSS to make sure the whole item is selected.
option:checked {
width:150px;
}
I would also suggest just increasing the width of the selector for a better user experience, if you do that, you will not encounter the above error.
These questions are similar but not the same or are very outdated:
HTML font weight property on OPTION of HTML SELECT
How to style the option of an html "select" element?
How can I change the font-size of a select option?
The goal is to style different options of the same select menu with different font-weights. We only need to support modern browsers.
This code doesn't work, even though answers on Stack Overflow and elsewhere suggest it should in modern browsers like Chrome.
Here's an example of what it looks like when using the answer from #gravgrif, which shows all the options styled the same:
Another alternative that did not help was bundling each option in an optgroup, and styling the optgroup.
<select class="weightMenu" title="Bold options available">
<option value="200" style="font-weight:200">B</option>
<option value="300" style="font-weight:300">B</option>
</select>
The goal is to use native HTML and CSS. No plug-ins.
Although your code works fine - you should move the styles to the CSS rather than inline styling. Note - i made the font weights greater to show the differences better.
.weightMenu option:nth-child(1) {
font-weight:400;
}
.weightMenu option:nth-child(2) {
font-weight:700;
}
.weightMenu option:nth-child(3) {
font-weight:900;
}
<select class="weightMenu" title="Bold options available">
<option value="200">A</option>
<option value="300">B</option>
<option value="400">C</option>
</select>
Using bigger font weight may solve this issue.
This is because lower values for font-weight looks the same.
<select class="weightMenu" title="Bold options available">
<option value="400" style="font-weight:400">A</option>
<option value="700" style="font-weight:700">B</option>
<option value="800" style="font-weight:800">B</option>
</select>
I am trying use multiple attributes where I make the dropdown list, however it is working but default browser changing. Is there any way I can make it drop-down. Please see the code..
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
But if I remove multiple attribute, I can see only drop-down list. Why is it showing different HTML control when I use multiple. I circled correct control with blue that's how I want to use multiple. Is there any suggestion or any ideas.
This code uses the selector's size = "6" attribute,
css code the selector limits the display to one line of the options tag
DOM action hovering over a selector shows the entire selector: hover is the option size = "6", the mouse points to selects one or more selections. The selector parent is the form's frame,
it is needed for relative positioning, children are positioned absolutely by default. This allows you to get a minimalist place for presenting data. The label opens the selector also, the browser handles the DOM after the id attribute and the for attribute are combined in the DOM. With index opens to the top of the next DOM element, if you need to open from the bottom edge of the parent frame, uncomment bottom 0% of the parent's height at the top of the frame.
You can extend this by adding the selected attribute to the first option with the value None, then the server will receive a message that no option has been selected,
you can add the required or patterns attribute for validation if you enter imput as an add option to save data for later selection, this allows you to get information from the user what data he wants to sort but not filter it.
CSS:
fieldset {
position: relative;
width: 300px;
}
select {
position: absolute;
height: 18px;
overflow: hidden;
}
select:hover {
position: absolute;
height: auto;
/* bottom: 10px; */
z-index: 1;
overflow: hidden;
}
HTML:
<form action="./shopping.php" method="GET">
<fieldset>
<legend>Clothes selection</legend>
<label for="clothes">Select Ctrl+LMB:</label>
<select multiple id="clothes" name="Outfit" size="6">
<option value="Trousers" >Trousers</option>
<option value="Hoodie">Hoodie</option>
<option value="T-shirt">T-shirt</option>
<option value="Trousers">Trousers</option>
<option value="Hoodie">Hoodie</option>
<option value="T-shirt">T-shirt</option>
</select>
</fieldset>
</form>
You Can go to web [http://getbootstrap.com/components/#navbar]
Copy code and it have Css and HTML
or u can go see in Youtube how to use Bootstrap
try Bootstrap Multiselect JS library :
http://davidstutz.github.io/bootstrap-multiselect/
How can I format <select>'s <option> element? Currently we have to use some plugins, like select2, or chosen, or selectboxit, or selectizr.
These js files are big size if we only need to modify UI of <select>'s <option> element, and don't need to use these libraries other features like, tagging, search etc.
I was able to remove <select>'s arrow so I can use any custom arrow or not. check it at :
How can I hide a <select> arrow in Firefox 30+?
But I did't find any option for improving presentation of elements.
About the most you can do is to color the text and change the background-color.
<select>
<option style="background-color: red;">Opt 1</option>
<option style="background-color: green; color: white;">Opt 2</option>
<option style="background-color: blue; color: white;">Opt 3</option>
</select>
You can try applying additional styles, but it's not a standard thing to do. Some browsers will even ignore styling applied to the select and option tags.
I found the following answer How to change select box option background color? but it did not work for me.
I have the following list in my html file
<select>
<option value="item 1" ></option>
<option value="item 2" ></option>
<option value="item 3"></option>
</select>
and the following css
select option[value="item 1"]{
background: rgba(100,100,100,0.3);
}
but i am still getting an empty list with no background colors.
What I am trying to get is some sort of a drop down with just colors and no text
something like this
thanks
Go with nth-child() instead :
select option:nth-child(1) {
background: rgba(100,100,100,0.3);
}
Then you are also not needed to change your CSS every time you change the values of the options.
Edit - I think you do
select option:nth-child(1) {
background: red;
}
select option:nth-child(2) {
background: yellow;
}
select option:nth-child(3) {
background: green;
}
<select>
<option value="item 1"> </option>
<option value="item 2"> </option>
<option value="item 3"> </option>
</select>
You see an empty list because the option elements are empty. You cannot expect to be able to see the background of an empty area. But you can include e.g. a no-break space in the option element:
<option value="item 1" > </option>
You may still have problems with some browsers (styling of option elements has many oddities and browser differences, and the background and text color of the currently selected option tend to be fixed, by the browser, rather than CSS-settable).
A completely different approach is probably needed, though. While waiting for <input type=color> to be implemented during a decade or two, you need to set up color choices differently. There are many existing libraries that contain code for such things, but they tend to have accessility problems. Perhaps the simplest approach is to contructs simple use a table with radio buttons in one column, color samples and corresponding color names in another. Here, too, you would need to remember to set some content, like no-break space, into the element you use to present a color sample using a background color.