In the last update of Chrome, some HTML instruction was changed that changed the interpretation of the "select" component.
Any idea how to fix this? It only happens in this latest version of Chrome (59.0.3071.115).
my combo
Here my Code:
<select id="SelectTest">
<option value="A">Item A</option>
<option value="B">Item B</option>
<option value="C">Item C</option>
<option value="D">Item D</option>
</select>
See the difference between my computer and my DEV environment (accessing through Citrix). The two with the same version.
Difference in items
Related
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>
If found a really annoying bug on the current (iOS 9.2) mobile safari (first appearing since iOS 7!)
If you using multi select fields on mobile safari - like this:
<select multiple>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
You will have problems with automatically selection!
iOS is automatically selecting the first option after you opened the select (without any user interaction) - but it will not show it to you with the blue select "check".
So if you now select the second option, the select will tell you that two options are selected (but only highlighting one as selected)...
If you now close and open the select again, iOS will automatically deselect the first value - if you repeat, it will be selected again without any user interaction.
Thats a really annoying system bug, which is breaking the user experience!
Solution for safari multi select bug and Empty and Disabled option tick related issue:
<select multiple>
<optgroup disabled hidden></optgroup>
<option value="0">All</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>
Add a disabled and hidden optgroup before the real options.
After a long research I found the following (not most beautiful) but working solution:
The trick is to add a empty and disabled select option at the fist position:
<select multiple>
<option disabled></option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
This will prevent iOS from automatically selecting the first option and keep the selection values right and clean!
The empty option is not visible and the count of the selections is correct.
I have a select div with options, and it worked fine before but now the last option is not being highlighted when I hover over it, what could be the issue?
<select id='theme_s' title='Click to change your theme'>
<option value='flame' selected>flame</option>
<option value='mint'>mint</option>
<option value='neon'>neon</option>
<option value='cmd'>cmd</option>
<option value='sky'>sky</option>
</select>
This is a known bug of the recently updated version of chrome.
https://code.google.com/p/chromium/issues/detail?id=334227
how to disable the <option> in select menu? I can handle this situation in browser but I cant in iPhone. Except approved option I disabled all. Here I attached the screenshot. Can any one tell me how fix this? thanks in advance .
This is a known issue in Safari for iOS. You can do 2 things:
Remove the options you don't want to be visible from the list
Tell the user that he made an invalid selection when he tries to commit the form
No other options here...
There are some standard options, if you try then this type of issue will resolved.
Try to use group options this will work with all devices and web browsers.
Tested with Android and iPhone4 and iPhone4s
<optgroup label='field name 1'>
<option value='1'>Name 1</option>
<option value='2'>Name 2</option>
<option value='3'>Name 3</option>
</optgroup>
<optgroup label='field name 2'>
<option value='1'>Name 1</option>
<option value='2'>Name 2</option>
<option value='3'>Name 3</option>
</optgroup>
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.