I have a problem here.
There's a select element with some options, and I wonder if it's possible to change the dropdown's background, width and font.
The sample markup is:
<form action="">
<span>Show</span>
<select name="cars" id="indicator-filter-options">
<option value="all" selected>Cars</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
I didn't paste my css because it's written in SASS using variables.
Is it possible to achieve a similarly looking background and hover effect as in here:
The dropdown design I'm trying to achieve is HERE
You cannot style dropdown options like that unless you use unordered list. The demo below might give you an idea.
<ul><li>Option One</li></ul>
View Demo
Related
Is it possible to dynamicaly resize the visible options in select tag in forms? I have the example:
<select size="1">
<option value='1'>1
<option selected value='2'>2
<option value='3'>3
<option value='4'>4
</select>
I would like to have visible all options (to setup size dynamically with css) when design page for printing. And also to see selected option(s) in another design (color, bold ...). For resize I tried:
select{
size:4;
}
but it doesn't work. I need a working solution at least for FF, IE, Safari ...
Do have any idea?
Thanks in advance!
You can use this way:
<select size="1" size="4">
<option value='1'>1</option>
<option selected value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
And don't forget to close the </option>
Does native HTML have a listbox element? You know how it has a drop box element (called select), does it also have a listbox?
If not, do you know how I could place a list box in my Website.
One method, is to create a table & have each element detect the onclick event. But I dont want to make my own just yet. Are javascript widgets easy to use?
Use a select list:
<select multiple="multiple" size="2">
<option value="Whatever">One</option>
<option value="Other">Two</option>
</select>
#Myles has the select box which is correct, you can also allow multiple select options.
<select multiple="multiple">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
Add the multiple attribute to a normal <select> and use the size attribute to determine how many rows you want shown. (If you don't set the size attribute, then all options will be visible.):
<select multiple="multiple" size="5">
See example.
I think what you need is the select tag, but set the selects attributes of multiple and size. Here is a reference http://www.w3schools.com/tags/tag_select.asp.
<select multiple='multiple' size='3'>
<option value='o1'>Red</option>
<option value='o2'>Green</option>
<option value='o3'>Blue</option>
</select>
At this moment the standards do not have a listbox element.
There's a web spec in progress about the <selectmenu> element which does have a listbox slot (not element). Possibly this could end up being back in the <select> element
If you want to read more about it:
https://open-ui.org/prototypes/selectmenu
https://css-tricks.com/the-selectmenu-element/
Is there any way to have a drop-down list in which non of the items are selectable? So basically, I'm just looking to use it as a way of showing/hiding a list. I don't want any hover highlighting and I don't want to be able to change the selected item.
Could you suggest if this is possible, or if anyone has any other ideas to achieve something similar, could you point me to a good example.
Thanks
The optgroup tag comes to mind. It has a disabled attribute.
<select>
<optgroup label="My List" disabled>
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
</optgroup>
</select>
However, IE 6 and 7 don't respect the disabled. Arrgh. Neither do they listen to the readonly attribute slapped on the whole select.
You will have to add a onchange="this.value ='item1';" fallback for those browsers, which obviously isn't watertight if JavaScript is turned off.
JSFiddle here
Is there any way to have a drop-down list in which non of the items are selectable?
I have same requirement So I did like this,
<select >
<option value="item1" disabled>Item 1</option>
<option value="item2" disabled>Item 2</option>
<option value="item3" disabled>Item 3</option>
<option value="item4" disabled>Item 4</option>
</select>
On JsFiddle
Is it possible (using HTML only) to display select with options that span multiple lines each?
It is not possible using html select control.
You can use a div that can act as a dropdown list using JavaScript and css.
not only is it not possible on standard html, but it would then (as an object) become incompatible with the way IOS devices handle the option tag, which is to display a scroll list so it is not even reasonable to want the option tag to behave that way as it would break cross-device compatibility badly and unexpectedly.
as others have answered (i dont have enough reputation to upvote or comment yet) have said, it must be done with css/div styling etc and in that way is a lot more extensible with full html functionality within each of the option tag's as well as (via css styling) being mobile device friendly.
If your case is around iOS truncating long option text, then the solution from How to fix truncated text on <select> element on iOS7 can help.
Add an empty optgroup at the end of the select list:
You can implement like this:
<select>
<option selected="" disabled="">option first</option>
<option>another option that is really long and will probably be truncated on a mobile device</option>
...
<optgroup label=""></optgroup>
</select>
As the presentation of a select element is up to the user agent, I'm afraid you can't have that, unless some UA actually implements it. But select as either a ListBox or ComboBox never really had much need for items spanning multiple lines. Furthermore it would greatly confuse users as they are used to one line = one item.
No.
You could use radio buttons instead though, their <label>s can word wrap.
It would be possible by using some JavaScript with CSS styling on HTML elements, easily done with a framework like Dojo Toolkit. Otherwise, use Radio or Checkbox controls.
If you have lots of options and for that reason looking for multi-line possibility, then there is another trick that can be helpful. Instead of using select and option tag, use datalist and option tag. By this, users can search for their option inside the select area.
<input list="stocks" name="stockArea" placeholder="hello">
<label for="stockArea">Select Your Stock</label>
<datalist id="stocks">
<option value="Microsoft" >
<option value="Lenovo">
<option value="Apple">
<option value="Twitter">
<option value="Amazon">
</datalist>
What about:
<!DOCTYPE html>
<html>
<body>
<select size="13" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
I don't know if this is what you were looking for, but maybe it could help you.
If you want to select multiple options, you must press Ctrl + click to select more options.
If you want to disable multiselect, just erase the "multiple" parameter from the SELECT tag.
I am using this menu on my web page
<select id="menu">
<option value="1"><h1>one</h1></option>
<option value="2"><h1>two</h1></option>
<option value="3"><h1>three</h1></option>
</select>
I would like to know why <h1>...</h1> is not working.
Thanks!!! in advance.
The option element only allows text as content. Here’s the element definition:
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
I've not tried this so this is speculation but I'd suspect that putting a Heading in a drop-down menu would be nonsensical. I would alter the format of the options using a CSS class on the option itself.
<select id="menu">
<option class="mybiggertext">Option 1</option>
etc...
You can not insert Html tags inside options element.
But you can do it by this way (includes all options) :
<select style="font-weight:bold;font-size:14px;color:red;">
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
</select>
If your aim is to increase the font size in the menu options, try this instead:
<select id="menu" style="font-size:20">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
Because you cant -to my knowledge- use tags within the select option tag..
If you want to change the font size use CSS instead:
<html>
<head>
<style type="text/css">
select, option {font-size: 200%}
</style>
</head>
<body>
<select id="menu">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</body>
</html>
Firstly, the specifications for HTML 4.01 and XHTML 1.1 specify the minimal content model for the 'option' element to be CDATA - meaning it can contain nothing but text (no child elements).
Most browsers respect this and don't bother rendering any elements inside 'option'.
Secondly, it seems you're using the 'h1' element to create a visual distinction, as opposed to its correct use as a header to create a semantic content hierarchy. I'd suggest you use something along the lines of:
<option value="1" class="big">one</option>
Styling 'big' as required.