While answering another question I came across this weird bug. A quick search has not found an existing question, so here goes:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/93D3h/4/
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option class="hidden">Item4</option>
<option class="hidden">Item5</option>
</select>
CSS:
.hidden {
display: none;
}
Q: Why is Item5 always shown, even though it is styled as hidden? Item4 is not visible. Note: I am testing this in the latest version of Chrome.
Update:
Different people are getting different results on different browsers. The following (from answer below) works on Chrome but not on the latest IE (both Item4 and Item5 are shown):
.hidden {
visibility: hidden;
}
Turns out this problem has been hit before (no surprise): How to hide a <option> in a <select> menu with CSS? but the surprising thing is that browsers do not support removing options with styling. Go figure!
Styling OPTION elements using CSS is not a reliable solution because user agents implement this very differently and non-standard. I wouldn’t call this a bug, because there is no style attribute definition in the specs for the OPTION element: http://www.w3.org/TR/html401/interact/forms.html#h-17.6
You could use the disabled property instead:
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option disabled>Item4</option>
<option disabled>Item5</option>
</select>
And/or use JavaScript to manipulate the DOM. A pretty good start would be to target the disabled elements for semantic fallback:
[].forEach.call(document.querySelectorAll('*[disabled]'), function(element) {
element.parentNode.removeChild(element)
})
Demo: http://jsfiddle.net/93D3h/15/
Or use jQuery: $('[disabled]').remove()
Update:
Based on the comments and the new requirements, I made a small toggle demo here using data attributes instead: http://jsfiddle.net/95Ed5/
try this code
.hidden {
visibility: hidden;
}
Designed to display or hide the element, including a frame around it and background. When you hide an element, although it is not displayed at a place that takes the element remains on him. If the intended output of different elements in the same place on the screen to bypass this feature should use absolute positioning, or use the property display.
Your best shot (cross browser solution) would be to use jquery to store the hidden values. It can be done it regular javascript too.
var array = $(".hidden");
$(".hidden").remove();
And then when you need them you get them in array
Update
Here is the updated fiddle : http://jsfiddle.net/93D3h/16/
I added two buttons to show what you could do with the stored hidden values (add them back to the select, or remove them)
Related
I'm playing around with some Expand Boxes.
I'm trying to create an HTML + CSS Expand Box without using JavaScript.
For now my code looks something like this:
/* no js */
.expand_box{}
.expand_box > .expand_box_checkbox{
display: none;
}
.expand_box > .expand_box_headline{}
.expand_box > .expand_box_content{
display: none;
}
.expand_box > .expand_box_checkbox:checked + .expand_box_headline + .expand_box_content{
display: block;
}
<div class="expand_box">
<input id="eb1" class="expand_box_checkbox" type="checkbox" />
<label for="eb1" class="expand_box_headline">click me</label>
<div class="expand_box_content">
Content to see after clicking on "click me"
</div>
</div>
Now, this is actually a nice solution, as it doesn't depend on JS and runs on practically every device.
What I am wondering about:
I am using the checkbox as a storage for state-information.
But this piece of information technically doesn't belong into the HTML, as I only use it for styling.
Is there any way to keep track of the state "user activated the 'click me' button", using pure CSS?
I know of the existence of CSS-variables. Maybe I can use them in some way?
HTML5 has a native control for expand box. It's details/summary elements. In supporting browsers it doesn't need JS and needs CSS only for custom styling. It may need a bit of JS only to work in non-supporting browsers (as a polyfill).
Besides hidden checkbox hack, CSS itself has another possibility to "emulate" states with the very long transition delay (like described here, warning: the example uses unitless 0 value of transition-duration which seems not working anymore, but it works with 0s instead). But these solutions are also too hacky. CSS was never supposed to maintain states, but it's excellent in presenting them.
I am creating a Drop down list in HTML using select tag. I am unable to increase the gap between the options inside the select list. Below is my code. How i can increase the gap between the options?
<style type="text/css">
#height {
width: 200px;
}
#height option {
width: 500px;
height:200px !important;
}
</style>
<select id="height">
<option value="bugatti">Bugatti</option>
<option value="lamborghini">Lamborghini</option>
<option value="ferrari">Ferrari</option>
<option value="levis">Levis</option>
<option value="reebok">Reebok</option>
<option value="nike">Nike</option>
</select>
The rendering of option tags is determined by the browser and they have their own peculiar way and so the restrictions like padding and even margin of option tag works in the mozilla firefox while it doesn't works with chrome.
Summary : If its very necessary to change the appearance, you can use custom JS plugins.
That is not possible. If you really need this you should create a custom Option Menu.
No padding, margin, height or line-height are working for options.
You can go with an empty option between the elements but its not a nice solution.
One workaround I found: Increase the font size of just one element (I chose the first one, which I always keep as a blank). I did it programmatically with Javascript:
document.getElementById("myddl").options[0].style.fontSize = "xx-large";
This forces all the options to be displayed with the same (enlarged) space, even though the fontsize of the other options is unchanged.
Woooo i tried this with different browser and one thing i found that by giving padding to the option of select tag this will only work in FireFox except other Browsers like(crome,Ie,safari)...!!!!!!
Strange ..!!!!
so you can try that dropdown with or jquery Pluggins for dropdown
For example,in the code,"option"is too low,I want to make it higher only with css(no javascript).
<select>
<option>Beijing</option>
<option>ShangHai</option>
<option>WuHan</option>
</select>
Since that <option> (and <select>) elements are rendered by the browser as a dropdown list, unfortunately you cannot style them, because their style is only controlled by the browser itself.
Change select > option to ul > li list and you can style as you want it yourself with Cross browser compatibility
You can use ul as alternative to style as you want, check this answer.
You can only make options bold or change the font-size, but it's not possible to change the space of the option.
option{font-size:20px;font-weight:bold;}
<select>
<option>Beijing</option>
<option>ShangHai</option>
<option>WuHan</option>
</select>
Options are rendered by the OS, not HTML, so the styling is limited.
line-height can be useful
-webkit-appearance: menulist-button this one can be used both will work
Try this:
option{
padding:10px 0;
}
JSFIDDLE DEMO
Also you can use the <optgroup> element to make it run in Chrome.
EDIT:-
Just saw that it is not reliable and cant be addressed perfectly for cross browser solutions.
MDN says:
Some elements simply can't be styled using CSS. These include all
advanced user interface widgets such as range, color, or date controls
as well as all the dropdown widgets, including , , and elements. The
file picker widget is also known not to be stylable at all. The new
and elements also fall in this category.
Alternative other than Javascript:
If possible then use Bootstrap's Dropdown.
If you're concerning about the mobile friendliness or the Google's mobile first SEO guidelines where the tappable items must not close to each other, then don't worry, modern mobile web browser will auto-adjust the item height for you.
Try This: change the height px to what you wish.
.a option { height: 50px; }
How can I completely change the design of a element? i am trying to make drop down like following image, what i wrote is
<select>
<option value="0">Title</option>
<option value="1">Mrs</option>
<option value="2">Mr</option>
</select>
i am stuck at put custom image to open drop down list for dropdown and also how to style select element
Some form elements are notoriously hard to style with CSS alone and still appear visually the same across all browsers.
The recommended practice for styling SELECT elemets is generally to use a javascript solution as this will work cross-browser.
Have a look at Chris Coyle's article on this:
http://css-tricks.com/dropdown-default-styling/
You can't style elements such as select in such a way you described it. Things like background-color or border are possible.
Styling with CSS only could go as far like this:
select {
border-radius: 5px;
color: lightgrey;
font-weight: bold;
}
With this CSS you will have the round corners and the font changed.
What's not possible:
Change the icon
Change the background or font of the dropped down box
Try fiddling with javascript, nested divs and a hidden input field. Also a glance at http://jqueryui.com could help you quite much.
Here is an example I have put on jsfiddle
<div style='width:30px;border:solid 1px'>
<select style='width:100%'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
<br/>
<br/>
<div style='width:300px;border:solid 1px'>
<select style='width:100%'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
In every browsers (FF,Chrome,Safari,IE9,IE9 in IE8 mode) other than IE 7/8, the options of the first combo are fully visible. IE8 is limiting the width of the options to the width of the outer div.
Here is a
Any idea how to fix that?
Adding overflow: hidden; to the div's style and width: auto; float: right; to the <select> seems to work for me.
<div style='width:30px;border:solid 1px; overflow: hidden'>
<select style='width:auto; float: right;'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
See working example at http://jsfiddle.net/J7sYq/10/
Sadly there is no css solution for this as it relates to the elements behaviour.
As such I will direct you to another source.
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
This changes the width of the element when it is focused on and sets it back when it loses focus. Not very elegant but still allows the whole option to be seen.
Hope this helps.
I know there are already a whole bunch of answers here. But none of the workarounds really suits my requirement when I met the same problem: I need to put the select inside a fixed width div. Beyond the width, it will be hidden and I don't want to see this - it's pure ugly. The first time I saw this link, I though I finally found what I want. But after playing with the demo, I was disappointed. The CSS tricks works a bit but it will change the width in whole not just the drop down list. What I need is a really nice looking select just as it should look on other browsers than IE.
I finally worked it out myself using javascript and css plus some ie version specific check. This is a summary of what I did:
Use a transparent div the same size as the select to cover the select. Now we can still see the item under the div but we cannot click on it.
The transparent div now intercept the mouse click and populate an unordered list with the items from the select. Then we show the list right under the original select. It looks exactly like a clicked select on other browsers.
When an item is selected in the unordered list, the list will be hidden and the corresponding item in the original select will be selected.
This approach requires more code, but it really simulate the "right" behavior of the select. The unordered list is styled with css, making it easier to change the look. It is tested under ie7-8.
Following is a screenshot from a working project viewed in ie 8:
Don't know of any solution (this is IE fancy world). Maybe a different widget for IE8 or less (extjs combo, jquery ui combo or some pop menu library).
This is what works for me:
<div style='max-width:300px;min-width:300px;border:solid 1px'>
<select style='width:300px'>
<option>This is my first option</option>
<option>option</option>
</select>
</div>
<br/><br/>
use * before your css property for ie specific css.
When marked with * only ie8 can understand
p.myclass {
width: 30px;
*width: 300px;
}/* Just an example*/
The ie8 browser will take its own property what you specify and use that. By this you can alert your site specific to ie8, but your property with * should come after the default property. see the code
You have specified width to the outer div consisting the select box. And it looks the same for me in all browsers.
If you want it to stretch based on the length of the options in the select box, then simply just don't specify any width or just say width:auto.
Check this http://jsfiddle.net/J7sYq/3/