Not sure if this can be done but can I split the text in the option tags?
Example, normal styling:
<select>
<option value="">First - A</option>
<option value="">Car - B</option>
<option value="">Black - C</option>
<option value="">Super Duper - D</option>
</select>
How can I get it to look like this:
<select>
<option value="">First - A</option>
<option value="">Car - B</option>
<option value="">Black - C</option>
<option value="">Super Duper - D</option>
</select>
I've tried added a span tag nested in the option tag but that didn't work
<option> tags do not accept HTML content. You can only pad your selections with spaces to format them.
Alternately, there are plug-in replacements for <select> that use DIVs and ULs instead of <select> that give you more flexibility.
The easier will be to use non proportional (monospaced) font for those boxes and then using right count of nonbreaking spaces like this:
<style>
select{
font-family:monospace;
}
</style>
<select>
<option value="">First - A</option>
<option value="">Car - B</option>
<option value="">Black - C</option>
<option value="">Super Duper - D</option>
</select>
Related
i have this select input that i want to make round
need this area to be round
here is a fiddle with what i have done
https://jsfiddle.net/kunz/2zu3m614/4/
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
i need to make the option part round is it even possible.
As of now there isn't css styling for the option elements.
However there is a Jquery plugin for this:
http://gregfranko.com/jquery.selectBoxIt.js/
So I was working with forms in HTML and here's the code that I used:
<form>
<label>Date Of Birth</label>
<select name="Month">
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
</select>
<select name="Day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="Year">
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
</select>
</label>
</form>
Now, this is incorrect semantically.(At least that's what I understand). And to group the select tags, we use Fieldset and legend tags. Can anyone explain, what is the use of these two tags or how it groups them? Is there any other use of the two tags and/or are the tags dependent of each other?
As others have commented, the use of fieldset and legend tags are self-explanatory and you can read more about them here and here.
Regarding your question, Yes, you could achieve the same behavior and looks using div, label, etc; but this is both semantically incorrect as well as more work for you to replicate the same appearance. And the legend tag is dependent on a fieldset tag, since it need to have a reference to place itself on.
The ideal scenario would be that if there is an HTML5 tag for it, use it instead of a simple div, it helps to make the document more human readable and to keep it in line with most modern pages;
For reference I explained a bit more about semantic tags on this question as well
https://stackoverflow.com/a/53229971/8437694
And this article helps explaining the benefits of semantic tags as well:
https://www.lifewire.com/why-use-semantic-html-3468271
I am looking for a way to have a scroll bar in a drop-down list in HTML, such that if the drop-down list contains more than eg. 5 items, a scroll bar will appear for viewing the rest. This is because I will be forced to have some big lists.
I have been googleing it for the past hours, but with no luck.
It needs to work for IE8+, FF and Chrome.
My list currently looks like this:
<select name="Select1" size="1">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
I have tried using the following CSS within a Div, but that made no difference.
.myDropDown{
height: 60px;
max-height: 60px;
overflow-y: scroll;
}
Changing the "size" gives a big scroll-able table, which is not what I am after.
http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-70-78-metablogapi/1882.clip_5F00_image001_5F00_thumb.png is an appropriate image of what I'm after.
I have the possibility to use js, php and jQuery if needed, but the simpler the solution, the better.
//Ambrose
You need to give an 'id' to your tag.
it should be like this
HTML 5
<select name="Select1" size="1" id="ddlCars">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
CSS
#ddlCars {
min-height:190px;
overflow-y :auto;
overflow-x:hidden;
position:absolute;
width:300px;
display: contents;
}
You cannot change the built-in behaviour of the SELECT element. You may want to consider a JS-based alternative, such at Twitter Bootstrap.
Perhaps I'm missing something but isn't that what the size attribute is for?
JSfiddle
<select name="Select1" size="6">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
Is there a way to add an additional 'submenu' to a dropdown list on a contact form? So it would technically work like a drop-down navigation.
Below is the drop-down list for my contact form. And i've been asked to see if I can add additional options to lets say, Existing Partner. So when they hover over that item it expands to other options.
<label for="hear">How did you hear about us? </label>
<select class="contact-drop-down" name="hear" id="hear">
<option>Click to choose</option>
<option value="1">Existing Partner</option>
<option value="2">Word of mouth</option>
<option value="3">Brochure</option>
<option value="4">Email mailshot</option>
<option value="5">Google</option>
<option value="6">Yahoo</option>
<option value="7">Bing</option>
<option value="8">Other search engine</option>
<option value="9">Other</option>
</select>
You can't expand on hover with the standard select within HTML, but you can with either Javascript or HTML5 and CSS3.
This site has a list of 30 examples of HTML5 navigation menus and this site has a large selection of Javascript and JQuery examples.
Hopefully one of these might help you get what you want.
You can use optgroup tag for this.
<select>
<optgroup label="Existing Partners">
<option value="existing_partner_a">Partner A</option>
<option value="existing_partner_b">Partner B</option>
<option value="existing_partner_others">Others</option>
</optgroup>
</select>
No you cannot add sub menu to actual dropdown control. But you may find many custom controls.
Check out this
Saurabh Goyal above suggested to use . I also thought of suggesting the same. But is used for categorization & I dont think thats what you want.
Try optgroup for this .for example
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Demo here
HTML:
display:none <b>not works</b>,the hidden can <b>not select</b>.<br>
<select size="5">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select><br>
display:none <b>works</b>,the hidden <b>can select</b>.<br>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
CSS:
select{width:50px;}
[value=C]{
display: none;
}
/* will hold the position */
[value=B]{
visibility: hidden;
}
The size attribute will affect the display and visibility, what happen to this ?
How can I hide the option in select which has a size attribute ?
See updated section
I think you can not do that only with CSS for all browsers you'll need some JS code, there is a previous question quite similar:
How to hide a <option> in a <select> menu with CSS?
In Chrome (v. 30) "display:none" doesn't work, however in Firefox (v. 24) It works, the option with "display:none" doesn't appear in the list.
UPDATE2:
In the current Chrome (v. 70) an Firefox (v. 63) versions, the use of css with "display:none" along with attribute "disabled" in the option tag removes the option from the list and it doesn't appear any more.
<html><body>
<select>
<option disabled style="display:none">Hola</option>
<option>Hello</option>
<option>Ciao</option>
</select>
</body></html>
Thanks to #achecopar for the help
The property Display:none wont work on the options tag
so you have only two options as work around
1. Either disable then with disabled="disabled".
2. Remove the options you don't want to see and insert them again when needed.
you may be able to find some other work around too, but i don't think it will be consistent in all the browsers
There is a technique for hiding options within a select in this post: How to hide a <option> in a <select> menu with CSS?
Use following jQuery to hide and show under select
jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option
is you need this...
<select>
<option value="A">A</option>
<option disabled value="B">B</option>
<option value="C">C</option>
<option disabled value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
the disable value are not select-able.
if you want to hide go here..
http://jsbin.com/anoci