Styling a select box with a size attribute? - javascript

For the life of me I can't figure out how to style a select box that uses the size attribute. Almost all of the tutorials out there are for a single-item select box. Does anybody have any experience with select boxes that use the size attribute?
For reference, this is what I'm talking about:
<select class="awesome_select" size="5">
<option>1</option>
<option>2</option>
</select>
I'm developing on Chrome/Safari/Firefox for Mac. I have tried the -moz-appearance: none; and -webkit-appeareance: none; properties for both the select box and the individual options. I have also tried setting a border on the select and the options.
I am able to style the select box in the sense that I can resize it, move it around, and change the font size, but I am completely unable to style the individual options.
edit 1 Here's an example of what I want to do:
select.awesome_select {
border: 1px solid #ACADAC;
padding: 0;
outline: none;
-webkit-appeareance: none;
}
select.awesome_select option {
padding: 5px;
background-color: #FF0000;
-webkit-appearance: none;
}
If I have a regular select (without using the size attribute) I can style this however I'd like. WITH the size attribute, the options suddenly are not able to be modified in any way.

Since you're open to use jQuery and since original SELECT doesn't suit your need, I suggest using Selectable from jQueryUI
If this doesn't suit you, Google for others, but search for "listbox" (e.g. "jQuery listbox), you will find alternatives like http://kalnitsky.org/projects/listbox.js/en/.
Most of them won't convert your existing SELECT element into a new one, but there're some that would.

give a class to the select element and do your css there.
<select class="classname" size="5">
<option>1</option>
<option>2</option>
</select>
//css
.classname {width:0;
height:0;
background:# ;//etc }

Related

Select2 - Make each selected option be in its own line

I was wondering if there's an option in select2 to make each selected item appear in its own line when using multiple selection.
<select id="items-select" multiple>
<optgroup label="Items">
<option>Alpha</option>
<option>Bravo</option>
...
<option>Zulu</option>
</optgroup>
</select>
$('#items-select').select2();
This is the default behavior
I want each option to appear in its own line because the selected options could be 30+ at a time and it would make it easier for the user to check if they got what they wanted.
I tried using the templateSelection option but adding a line break or a <br> tag did nothing there. Currently, I'm able to achieve this by using the following CSS rule
.select2-selection__rendered {
display: grid !important; /* by default it's inline-block */
}
Is there something I'm missing or is there no other way to do this?
You could add the following CSS rule :
.select2-selection--multiple .select2-selection__choice {
display: block !important;
width: fit-content;
}

How to make a Select element accessible if it has no label?

I'm learning about accessibility in HTML and I came across an example of a Select dropdown HTML element, this element doesn't have any text label next to it, just the context of a title higher up the page gives an idea to what this element contains e.g. for example a list of countries on a section about countries.
When running an accessibility tool on it, the tool complains that there is no accessible name, I was wondering if there is a way to give this a name for a screen reader without having to add a label if that is not wanted as part of the design?
Short Answer
It isn't about what you want as part of your design, it is about what makes the page usable for as many people as possible. You should make the design work with a visible and properly associated label.
Longer Answer
There are ways we can add a label that isn't visible, one way being aria-label:
<select aria-label="label for the select">
</select>
Or we could use a visually hidden class on a <label> element so that it is still reachable by Assistive Tech (screen readers etc.) but does not show visually:
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<label for="select1" class="visually-hidden">Label Text</label>
<select id="select1">
<option>Option 1</option>
<option>Option 2</option>
</select>
But although that helps people using Assistive Tech (AT) such as a screen reader, it doesn't help everybody else.
What if someone has a learning difficulty and cannot associate the options in your select with the heading further up?
What if someone is using a screen magnifier and needs a label close to the control to know what it is for?
What if someone is using a custom style sheet that changes your layout and the association based on the layout doesn't work anymore?
So the answer is to add a <label> that is visible and properly associated to make it accessible and better for everybody.
The design should not suffer from a visible label (and if it does, your graphic designer / UI team need to up their game!) and it is likely to have the added bonus that people will feel like the form is easier to fill out, increasing conversions (as you reduce "friction").
So the best thing is to add a visible label:
<label for="select1">The label</label>
<select id="select1">
<option>Option 1</option>
<option>Option 2</option>
</select>
Note the use of an explicit label using for="IDofSelect", rather than an implicit label - where you wrap the <select> in a <label>, as implicit labels can cause problems with voice software such as Dragon Naturally Speaking

How to remove blue border around option elements in select box AND blue option color

As question title says, I am wondering how to remove that default blue border around option box when clicked on select?
And, how to remove default blue that shows on hover over that same option?
UPDATE I noted many of You understood me wrong, acctually THIS is what I want to customize.
You can use the HTML5 elements:
select{
border: none;
appearance: none;
color: red;
}
select option{
color: red;
}
DEMO HERE
Note: Currently there is no way to apply css(hover) in the option to get your desired result
with CSS
input, select{
outline: 0;
}
There is jQuery Plugin which may help you.
Chosen

jQuery - add icon to select option based on value

I am currently trying to make any use of Polylang, a Wordpress plugin that allows to add language switcher to the website.
It currently generates simple select dropdown menu and changes the language upon selecting the language, so it's ok, however I am unable to style it properly - it's a raw dropdown menu.
I would like to add icons next to the displayed option, and as far as I know jQuery is my best shot here.
The issue I am having is that <option> tags are missing id or class tags, and it is impossible to add them without modifying the plugin itself.
Is it possible to create a jquery script that will display a flag next to the option based on it's value attribute?
Can you show me any example how to?
<select name="lang_choice" id="lang_choice">
<option value="en">English</option>
<option value="fr" selected="selected">French</option>
<option value="de">Deutsch</option>
</select>
SOLUTION 1 (Flags outside of the dropdown):
Try this:
$('<img class=flagicon src="'+$("select#lang_choice").val()+'.png">').insertAfter("#lang_choice");
$("select#lang_choice").change(function(){
$(".flagicon").attr("src", $("select#lang_choice").val()+'.png');
});
The function assumes, that you have your flags named fr.png, de.png and en.png
The first line adds the first icon, if no option has changed yet.
JSFiddle: http://jsfiddle.net/2j46orr4/1/
SOLUTION 2 (Flags inside the dropdown, every option has its own background-image):
If you want to show the flag INSIDE the option, use a background-image:
CSS:
#lang_choice {
background-repeat: no-repeat;
background-image: url(/img/en.png);
background-position: right center;
padding-right: 20px;
}
#lang_choice option:nth-child(1) {
background: url(/img/en.png) no-repeat right center;
}
#lang_choice option:nth-child(2) {
background: url(/img/fr.png) no-repeat right center;
}
#lang_choice option:nth-child(3) {
background: url(/img/de.png) no-repeat right center;
}
jQuery:
$("select#lang_choice").css("background-image",'url(/img/'+$("select#lang_choice").val()+'.png)');
$("select#lang_choice").change(function(){
$("select#lang_choice").css("background-image",'url(/img/'+$("select#lang_choice").val()+'.png)');
});
The flags have 16px margin on their right, so they are not hidden under the option arrow.
Demo: http://jsfiddle.net/2j46orr4/7/
(Chrome does not seem to render the option > background-image at the moment.)
you can use a jquery plugin like this one.
HERE: http://designwithpc.com/Plugins/ddSlick#demo

dropdown menu selected option different font to others

Basically I have a dropdown menu :
<select id='getbusornew' style="font-size:14px;" >
<option value='News'>
BBC News
</option>
<option value='Business' >
Business News
</option>
</select>
How can I have separate style for the option that has been selected. So the selected one has a different font size to the one that is not selected. When the other is selected it has the selected font size and the one that was selected not has the non-selected font size
You can use the :checked psuedo class to specify the currently selected <option> in the <select>.
So your CSS might look like this:
#getbusornew option {
font-size: 16px;
}
#getbusornew option:checked {
font-size: 18px;
}
I wrote a quick example on JSBin here: http://jsbin.com/nohovaqikafe/1/edit
You can do like this way. While selecting an option, add a particular class to it.
$("#getbusornew :selected").addClass("selected");
$("#getbusornew").change(function(){
$(".selected").removeClass("selected");
$("#getbusornew :selected").addClass("selected");
});
css
.selected
{
font-size:20px;
color:red;
}
Demo
Option tag has selected property, if selected.
So, you may write special CSS for that.

Categories

Resources