Put text input inside label for radio button?

Posted by Martijn on Stack Overflow See other posts from Stack Overflow or by Martijn
Published on 2010-05-31T08:14:18Z Indexed on 2010/05/31 8:23 UTC
Read the original article Hit count: 348

Filed under:
|
|

I'm trying to make a radio group specifying a bunch of options, and an extra option "other" with a text input to specify. The code for this particular radio button I'm using is

<input type='radio' name='RadioInput' value='Other' id='RadioInput_Other' />
  <label for='RadioInput_Other'>Ohter: 
  <input type='text' name='RadioInput_Other_Value' id='RadioInput_Other_Value' value='' />
  </label>

The idea is that if you give focus to the text input, the radio button corresponding to it is selected. The code above almost does this (since the text input is inside the label). However, it also shifts focus to the radio button (which is annoying, since whatever you type next is lost).

Is there any way to prevent this using XHTML1.0 / CSS2? Preferably without using javascript.

© Stack Overflow or respective owner

Related posts about XHTML

Related posts about input