I am trying to display a multiple select that is disabled and has some options selected. The following fragment works well on Chrome and FF, but I can't seem to see the selected items on IE7. Anyone know a way to make it work?
<select multiple="multiple" disabled="disabled">
<option value="volvo">Volvo</option>
<option value="saab" selected="selected" style="color:white">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi" selected="selected" style="color:white">Audi</option>
</select>
IE7 simply does not support the styling of disabled elements, SELECT especially.
Related
I have an issue select box on ie only. If it have both the attribute selected and disabled together it breaks the default style. Is it have any solution for this problem?
Click on image for a larger version of the image.
Example code is attached with this description.
<select>
<option value="volvo" selected disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
they only workaround i could think of was to change the background-color of the disabled option to the default background-color a disabled button has, which is #f4f4f4
you should also add a conditional so the code will work only for IE . see here for more info > How to target only IE (any version) within a stylesheet?
option:disabled {
background-color:#f4f4f4;
}
<select>
<option value="volvo" selected disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I'm trying to add more usability to my Select box for screen reader users. Right now they have to remember the options to select the right answer. I am using aria-label to provide additional information in the 'option'. It works fine with Firefox and Chrome but not with IE 11 or less. It seems to be okay with Edge. Is there a work around or another option to get it to work in IE 11?
Code:
<option id="question1_item0">Select</option>
<option id="question1_item1" aria-label="1 an actor" >1</option>
<option id="question1_item2" aria-label="2 a country" >2</option>
<option id="question1_item3" aria-label="3 a color" >3</option>
<option id="question1_item4" aria-label="4 a wesite" >4</option>
</select>
Label is the name of an input in a form. Not every option in a select.
Can you try it like this?
<label for="actor">Actor:</label>
<select id="actor">
<option label="Select">Select</option>
<option label="1">1</option>
<option label="2">2</option>
<option label="3">3</option>
<option label="4">4</option>
</select>
Demo here
HTML:
display:none <b>not works</b>,the hidden can <b>not select</b>.<br>
<select size="5">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select><br>
display:none <b>works</b>,the hidden <b>can select</b>.<br>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
CSS:
select{width:50px;}
[value=C]{
display: none;
}
/* will hold the position */
[value=B]{
visibility: hidden;
}
The size attribute will affect the display and visibility, what happen to this ?
How can I hide the option in select which has a size attribute ?
See updated section
I think you can not do that only with CSS for all browsers you'll need some JS code, there is a previous question quite similar:
How to hide a <option> in a <select> menu with CSS?
In Chrome (v. 30) "display:none" doesn't work, however in Firefox (v. 24) It works, the option with "display:none" doesn't appear in the list.
UPDATE2:
In the current Chrome (v. 70) an Firefox (v. 63) versions, the use of css with "display:none" along with attribute "disabled" in the option tag removes the option from the list and it doesn't appear any more.
<html><body>
<select>
<option disabled style="display:none">Hola</option>
<option>Hello</option>
<option>Ciao</option>
</select>
</body></html>
Thanks to #achecopar for the help
The property Display:none wont work on the options tag
so you have only two options as work around
1. Either disable then with disabled="disabled".
2. Remove the options you don't want to see and insert them again when needed.
you may be able to find some other work around too, but i don't think it will be consistent in all the browsers
There is a technique for hiding options within a select in this post: How to hide a <option> in a <select> menu with CSS?
Use following jQuery to hide and show under select
jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option
is you need this...
<select>
<option value="A">A</option>
<option disabled value="B">B</option>
<option value="C">C</option>
<option disabled value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
</select>
the disable value are not select-able.
if you want to hide go here..
http://jsbin.com/anoci
I have a form with a select list of various office locations, i have it set so it should have the office initially selected BUT it does not seem to Work in IE!!! (no surprise)
here is what i am using to preselect:
<option selected value="Office 1">Office 1</option>
here is the site: http://www.nwtaxpreparation.com/offices/122andpowell.html
let me know if you have any solutions!
HTML 4 uses:
<option value="foo" selected>Bar</option>
XHTML REQUIRES:
<option value="foo" selected="selected">Bar</option>
To say that "there is no such thing as selected="whatever" is false!
I recently had the same problem with selected options tags. I had a series of select boxes like this:
<select>
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
<select>
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
I couldn't work out why the correct items wouldn't select. I later discovered that it was because there was no name attribute on the select item. Firefox seems to need this to work properly, even in version 15.
<select name="type">
<option value="dr">Day rate</option>
<option selected="selected" value="sv">Social value</option>
</select>
I changed it to the above and selected="selected" works fine now.
How do you get the selected option to be in view on page load?
<select name="whatever" size="5">
<option value="1">1</option>
<option 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" selected>7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
If I understand you correctly, you want the item shown in the dropdown list to be the selected item when the page loads. By default behavior the selected view does in fact show "in view" on page load. What are you seeing that you do not expect?
note: your html should be
<option value="7" selected="selected">7</option>
to be a valid html tag.
All browsers I've tested (Firefox, Chrome, Opera and IE7) scroll the contents to display the selected option.
Edit: Windows XP