I need help to show different text upon selection form dropdown without javascript
i tried below code but it also use onchange event .
<div>
<select onchange="if(selectedIndex!=0)document.getElementById('t').innerHTML=options[selectedIndex].value;">
<option value="">< select an option ></option>
<option value="term 1">term 1</option>
<option value="term 2">term 2</option>
<option value="term 3">term 3</option>
</select>
</div>
<div id="t"></div>
I need help from you to have the same functionality but without javascript.
Thanks
Unfortunately this will not be easily possible and even possible with current css 3 and HTML 5 standards.
Actually based on pseudo selectors and elements you can do the checkbox hack
The same checked tag applies and for <option> elements from <select>
So based on this selector you can for example hide the selected element from the <select> with code like in this StackOverflow comment
The main problem here is that based on this pseudo selector you can select only elements that are inside the <select> tag - this means other option tags next to the selected one.
In order to build a selector that selects the element #t from your example you will first need to go out for the options element level and select the <select> tag and look for some element after it that you can try modifying/making visible/invisible with a css. In the current selector specification you are not able to get the parent of some element. See this stackoverflow comment for any updates on that. So as of FEB 2020 you will need again to do this with JS which makes the current effort useless.
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>
This question already has answers here:
How to style a select tag's option element?
(6 answers)
Closed 5 years ago.
I tried to add some letter-spacing to the options of a selectbox. It seems that this do not work. To test if i touch the right element I added some color to the option.
letter-spacing
select {
letter-spacing:10px;
}
option {
letter-spacing: 10px;
color: red;
}
<select class="form-control" name="select" id="myselect">
<option value="105">Option 1</option>
<option value="106">Option 2</option>
<option value="107">Option 3</option>
</select>
If you want to style dropdown selection, you will have to use some js lib to do so... There are many browsers, that complety ignore dropdown styling (in addition - mobile browsers will pop up the dropdown list with system visuals - fonts, sizes, color and so on)
Check out something like this http://www.jqueryscript.net/demo/Easy-jQuery-Based-Drop-Down-Builder-EasyDropDown/
I personally don't recommend trying to style native <select><option> for the sake of visual integrity
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/
How do I add a horizontal line (<hr> tag) in the dropdown control or in select control in HTML?
Generally speaking this is not a feature of <select>, most browsers have very poor styling control for that control. In Firefox you can do the following (though doesn't work in other browsers):
<select name="test">
<option val="a">A</option>
<option val="b" class="select-hr">B</option>
<option val="c">C</option>
<option val="d">D</option>
</select>
with CSS:
option.select-hr { border-bottom: 1px dotted #000; }
But generally speaking, the only method is to put an option in with dashes, and try to make it unselectable.
<select name="test">
<option val="a">A</option>
<option val="b">B</option>
<option disabled="disabled">----</option>
<option val="c">C</option>
<option val="d">D</option>
</select>
See: http://jsfiddle.net/qM5BA/283/
I've run into this issue before and the only cross-browser way to achieve this is to use unicode box drawing horizontal characters. Browsers don't render spaces between these characters. Of course that also means that your page must accept unicode (utf-8) which is almost a given these days.
Here is a demo, this one using a "light horizontal" box mark:
<option value="" disabled="disabled">─────────────────────────</option>
There are various unicode box character options you can use as separator which should be rendered without spaces between them:
"─", "━", "┄", "┅", "┈", "┉"
More about unicode box drawing characters here: http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm
You can also include them using HTML escape chars (copy and paste usually works by inserting the box characters' UTF-8 sequence, which browsers seem to respect, but if that's not an option), this for four light horizontal box marks in a row:
────
which renders as
────
The select element may only contain optgroup or option elements, and option elements may only contain text. Markup like <hr> is forbidden.
I would use an element like this to create a separator:
<option disabled role=separator>
You may consider markup like this:
<optgroup label="-------"></optgroup>
However, the rendering between different browsers varies a little too much to be acceptable.
You could use the em dash "—". It has no visible spaces between each character.
In HTML:
<option value disabled>—————————————</option>
Or in XHTML:
<option value="" disabled="disabled">—————————————</option>
<option>----------</option>
or
<option>__________</option>
but you can't write <option><hr /></option>
you could also add a css class to an empty <option> with a background image
<option class="divider"> </option>
This is an old post, but I ran into a lot of posts in which no one even bother to find a elegant solution, although it is simple.
Everyone is trying do ADD something into between <option> tags, but no one thought about STYLING the <option> tag, which is the only way to do it and to look amazing.
To easy to be true ? Look
<select>
<option>First option</option>
<option>Second option</option>
<option>Third option</option>
<option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
<option>Another option</option>
<option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
<option>Something else</option>
</select>
I've placed the style with the html for ease.
This doesn't work anymore, it's clear, don't know why people keep posting answers. The rules changed, this solution worked, I've been using it myself.
Nowadays I'm using jQuery plugins for this.
Lates edit:
Everyone can use the amazing selectpicker plugin
Dropdown plugin
If you want to insert a seperator of sorts into a tag, you can do something like this: http://jsfiddle.net/k4emic/4CfEp/
However, this isn't recommended practice.
I used JSP but you will see that is same.
I am iterating through a brandMap LinkedHashMap where if key >= 50000, then it is a line separator, else is a normal select option. (I need that in my project)
<c:forEach items="${brandMap}" var="entry">
<c:if test="${entry.key ge 50000}">
<option value=${entry.key} disabled>––––</option>
</c:if>
<c:if test="${entry.key lt 50000}">
<option value=${entry.key}>${entry.value}</option>
</c:if>
Simple Way :
<h2 style="
font-family:Agency FB;
color: #006666;
table-layout:fixed;
border-right:1px solid #006666;
border-right-width:400px;
border-left:1px solid #006666;
border-left-width:400px;
line-height:2px;"
align="center"> Products </h2>