Is there any way to make select, which allows multiple selections look like ordinary?
Like a drop-down, you know…
<select multiple="multiple"></select>
look like
<select></select>
http://jsfiddle.net/UKf5Y/3/
Well, no. If there were, how would the user use it to select multiple items?
The only way that a multiple selection works is because all of the items are displayed at the same time and they can click-and-drag or click while holding down a modifier key.
If it looked like a drop-down box, how would you navigate to a second item without deselecting the first?
The styling of a select list, as well as many different elements in HTML (notably the input[type='file'] element, is really dependent on the browser. If you're looking to make it visually more appealing / different, you'll really need to use some JavaScript and use an "interface" to your select. Some really nice JavaScript libraries for select lists are jQuery Multiselect, jQuery UI Multiselect and select2, maybe you should look at those.
It's worth noting however that only select2 supports the single/multiple variants, and the styles still do look different, but how else would you be able to see multiple selections at one time? You could design your own solution which did look identical, but I think more than anything this would be misleading.
Related
Can any browser developer, or anyone who knows why it is so difficult (if not impossible) to style the dropdown list of a <select>, there's any "real explanation" that prevents browsers treat the <select> <option> in a more convenient way.
Every time I see questions like How to modify CSS of a dropdown? in different sites that receive answers like
"It's not possible to style the dropdown list of a html select. But you can build your own dropdown list or use a framework like bootstrap."
or
"If you decide that it's absolutely a good idea to customize a dropdown, then you should use JavaScript".
And I really don't know why, I know now the <select>, I mean the container box, can be styled a little more using
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
And then giving our styles, which is not as simple as all say because we have to do some tricks to make it right, especially with the famous litter arrow.
As time passes we are neglecting such a simple and comfortable as the <select> element and almost all the developers opted to use some of the answers above and at least I still do not know why.
So at least I will be grateful if someone could help me.
Dropdown lists are highly dependent on the system they're running on. Just look what they look(ed) like on iOS:
The <select> element is giving you a uniform way to mark up the functionality of a list of options which can be selected. How that list is represented is entirely up to the browser, and the browser can implement it in the best possible way for the given circumstances. As such it makes no sense to try to "style" it in any way, because you cannot predict how it's going to be presented in the first place.
Usually every operating system a browser runs on has native dropdown lists, and they can look very differently on different systems. The idea is that the <select> element can use the native dropdown list style of the underlying operating system.
It's not that it's "hard" to do, it's that styling a dropdown list makes no sense given the presentation-neutral priorities the <select> element embodies. It is the lowest common denominator of what a dropdown list is across all systems, hence system-specific styling makes no sense.
I´ll just share here the answer I wrote yesterday after reading about selects. As it´s not the same question, I´ll not mark it as duplicated, but anyway is a little wide question to talk about.
About selects:
They are not usual DOM elements, and that makes them behave different from others. It seems the browser generates them outside the DOM model, and then the events like click, or keypress on options do not work.
Also attributes like size will change their behaviour (a size bigger than 1 will make it appear as a list, not a dropdown).
Check this answer:
Check if select is displaying options
As you can see, there is an example with Jquery, then you will be able to style it, or to play with it´s properties. Also there are some useful links and the explanation for them.
Hope this explanation could help to you.
Regards
Is it possible to somehow combine two <select> tags into one dropdown, preferably in a way which works fine with Bootstrap or the Chosen.js plugins?
I have clients and client groups. In the form I want them to be combined in one dropdown. It should look like "Multiple Select with Groups" in ChosenJS when you use <optgroup> tag.
The problem is that I want different post parameters depending on whether user has selected single client (I need to receive client_id) or client group (I need to receive client_group_id)
So a in trivial case I would make two <select> tags with different name attributes, which are mutually exclusive. But it would look much better if they're combined in one dropdown.
The best thing I can think of is to use <optgroup>, then in each <option> to put something like a data-type attribute, then when user selects something I'll manually fill some hidden input type. Seems okay, but maybe there is a better solution?
On many websites, when typing in a username for example, a dropdown occurs where previous input shows up so the user can easily select something instead of typing. I know you can turn this off in browsers by having the form or input have an attribute of autocomplete="off". The problem is when I want it on, and the input has padding. The dropdown looks horribly off because it has no padding for each item.
Is there any way to style this with only css? I'm aware that you could potentially use a javascript/jQuery workaround to store previous entries in a cookie or something and make your own dropdown. But I don't want to rely on javascript for this.
Nope. Autocomplete is not a part of any standard, and is not part of the DOM. The only way to style is, as you've suggested yourself, by recreating that functionality using JavaScript.
Unfortunately there is no way to style the drop down box itself with CSS, because in this case (when not using javascript/jQuery/mootools/etc.) it is operating system dependent - i.e Windows/Linux/Mas OS visualize it according the visual user settings (i.e scheme).
The client is looking for a control on the page which resembles and behaves like a dropdown select box, but that you can type into.
The page is initially going to load with thousands of items in a dropdown select box. Rather than display all the results, they want to type part of the word they're looking for into the textbox and to filter the result set.
The client specifically stated that they want to have a select box that can accept text. Does such a control exist? Is it something I'm going to have to hack together myself? Can somebody suggest how best to solve this problem?
As mentioned in the comments by dudeNumber4, there is no way to do this with just HTML. The best way would be to use jQueryUI autocomplete
I have a form in which a user can select multiple options in a select menu. From a user experience perspective, what do you think is the most intuitive / best option?
A) Use the "multiple" attribute for select element (then you can hold down control and select multiple options). ADV: Simple, no coding required. DIS: Not intuitive.
B) Have multiple checkboxes and a select all/select none control. ADV: Fairly simple. DIS: Will get cluttered when there are many options
C) Have two select multiple menus side-by-side and have buttons to add/remove options. The chosen options will be on the right and be submitted. ADV: Clean DIS: Will break if JS is not on.
Can anyone think of better options?
I vote for B.
Option A is the "vanilla" option, but I hate having to hold down Control and scroll through a long list. Inevitably something will slip and clear the whole list. I'm sure the folks with arthritis hate it too.
Option C is a common enough paradigm, but when you have more than a few options it gets a little difficult to keep track of, especially if the options have any order or relation to them. I prefer to have one list where I can relate all the options to their neighbors. It depends on your specific use case I suppose.
Option B is easy to code, can be used 95% without JS, and gives you complete flexibility in your layout. It's only as cluttered as you design it to be. This is the way I do multiple-selects and find it very easy to work with.
A) Good if you don't have a very long list. It will be very annoying to use if you have lots and lots of items. Bad because it is not searchable, unlike option B.
B) Good because this will not require the user to understand holding down control. Because of this, the user won't be able to accidentally clear their selection either, which is obviously a good thing. It will also display much more cleanly what options you have chosen. Good because you can group related options under a single headline or other graphical indication. This approach will work without JS, with the exception of a select all button, a select none button can be done using a input type="reset".
C) I think this can be good if the user is clearly adding to a list, instead of selecting options. But as you say, it will not function without JS. I would consider A and B instead of this. Also not searchable unless you provide a custom filter box (which again depends on JS)