Categories: Report an Issue :

HTML5 Required property changes <select> option fonts to Times New Roman

Showing 1-3 of 3 messages
HTML5 Required property changes <select> option fonts to Times New Roman LanFeusT23 1/16/13 10:16 AM
When adding the required property to a <select> element, when we submit the form the select options show up using the Times new Roman font.

I made a jsfiddle here. First click on the select but don't select anything, just notice the Arial font. Then click on the "GO" button and then on the select again after the required form denies you submission, you'll see the option fonts have changed.

I've tried forcing them with !important on select option but it doesn't work... any ideas?

This only occurs with Chrome.

Code:

<form method='post' action=''>
  <select id='select' required>
    <option value>Select stuff</option>
    <option value='1'>Test 123</option>
    <option value='2'>Test again 123</option>
    <option value='3'>Test more 123</option>
  </select>

  <button type='submit'>go</button>
</form>

body {
  font: 80%/1.5 Arial;
}

select option {
 font-family: Arial !important;
}

Chrome Version (type about:version into your omnibox):
Operating System (Windows 7/8/Vista/XP, Mac, Linux, Android, iOS):
Extensions (type Chrome:extensions into your omnibox):

Re: HTML5 Required property changes <select> option fonts to Times New Roman LanFeusT23 1/16/13 10:27 AM
jsfiddle link: http://jsfiddle.net/h52ZV/
Re: HTML5 Required property changes <select> option fonts to Times New Roman LanFeusT23 2/4/13 10:40 AM
Anyone? Please?! ^^