I am using the Ubuntu font from Google fonts in my project. Unfortunately when using the fonts, Firefox does not show the right border of selects/dropdowns.
I have created a fiddle, check it out with Firefox.
Relevant code
<link
href="http://fonts.googleapis.com/css?family=Ubuntu"
rel="stylesheet" type="text/css" />
<style>
input, textarea, select, span
{
font-family: 'Ubuntu' , sans-serif !important;
font-size: 13px;
}
</style>
<span>Some text to show that the font is indeed in use</span>
<br />
<select name="testSelect" id="testSelect">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
Please set width selects/dropdowns.
As much as this might not be the answer you're looking for, in general, I try to avoid styling <select> elements directly. What properties 'take' in one browser versus another seems to vary widely, so it never seems to work correctly. For instance, I checked your jsFiddle out in Chrome, and the drop down ignored your Ubuntu font declaration altogether. That's just how Chrome rolls.
So, my suggestion would be to remove the styling for select in your stylesheet and just let the browsers do their thing. The upshot of this approach is that a user will get a drop down that they are familiar with in their browser.
All that said, if you REALLY need to style a drop down, there are methods out there for basically hijacking a <select> element with javascript, and replacing it with a bunch of divs. I like the Chosen library for this sort of thing. As it renders <div>'s on the page, you can style those to your heart's content.
Related
Is there a way to style the following markup …
<select>
<option>Canteloupe</option>
<option>Canteloupe</option>
<option selected>Crabapple</option>
</select>
… so that all the options are visible at once?
I would like it to behave as though all the elements are <div>s, so I can lay out each option for a printed version of the form.
Like this:
<div>
<div>Canteloupe</div>
<div>Canteloupe</div>
<div>Crabapple</div>
</div>
I have tried -webkit-appearance: none, which removes the operating system appearance, but doesn't stop the select element from hiding its non-selected <option>s.
A lot of built-in html elements can have their built in styling overridden "back to nothing", but it seems as though <select> is magic, and has user agent behaviour that can't be undone.
I don't have to support old browsers (e.g. IE11)
For you case I think using multiple attribute would be a valid way to have all the options laid-out for printing:
#cars {
border: 0 none;
}
<!DOCTYPE html>
<html>
<body>
<select id="cars" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</body>
</html>
In this sample http://jsfiddle.net/2SuN8/1/
<select>
<option value="0"></option>
</select>
<select>
<option value="0"></option>
<option value="1">A</option>
</select>
there is a 1px height difference between those two drop-downs.
I assume this happens when one select contains only one empty option.
Should I avoid empty default options or do You know any way to work around this?
I've seen this issue in FF 27.0.1 (Ubuntu 13.10 and Windows Server 2008) and with IE 10 (Windows Server 2008).
Thanks
Hannes
This is happening because you aren't specifying a height for the select element, so by default its height is determined by its content. In the case of your select element with only one empty option, as there is no content, there is no height.
CSS Solution
The CSS solution would be to simply add a default height to your select element:
select {
height: 20px;
}
JSFiddle demo.
HTML Solution
The HTML solution, as mentioned by others here, is to populate your empty option with some content:
<select>
<option value="0"> </option>
</select>
JSFiddle demo.
In this case, is the non-breaking space entity.
Personally I'd go with the CSS option.
now there is no different height :D
change
<option value="0"></option>
to
<option value="0"> </option>
http://jsfiddle.net/2SuN8/2/
Yes, you should avoid empty select options. Instead you can set empty value for first option.:
<select>
<option value=""> - - select - -</option>
<option value="a"> A </option>
<option value="b"> B </option>
</select>
Set the width and/or the height and they will be the same size.
<select style="width:100px; height:20px;">
<option value="0"></option>
</select>
<select style="width:100px; height:20px;">
<option value="0"></option>
<option value="1">A</option>
<option value="2">B</option>
</select>
Edit: My version is the quick and dirty version, if you want the right way to do it, use a separate CSS file or a space substitute as others have described.
The reason that it happens is that in some browsers (for example Firexox) the select element for some reason will grow to accomodate its largest option value, eventhough the value may not be shown in the select in the same way as in the option.
For example:
<select>
<option value="0"></option>
</select>
<select>
<option value="0"></option>
<option value="1">A</option>
<option value="2" style="font-size:20px">B</option>
</select>
Demo: http://jsfiddle.net/Guffa/2SuN8/3/
In firefox the select element will be tall enough to accomodate a 20px text, but if you choose the option B it will not be shown with the font size specified for the option, but with the font size specified for the select.
One workaround would be to set a specific height to the select. A workaround for the specific case of the empty option could be to use a space inside it, like Sharky showed.
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>
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.