Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Radio Buttons: add space between the buttons from the same groupe

I have 3 radio buttons on the same line in a td of the table like that:

<td align="left">
            CHF <input type="radio" name="currency"  id="chf_currency" checked="checked" onChange="currencyChanged()" />
            USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
            EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>

Now I would like to add some spaces between those radio buttons and I don't know how to do it.

I tryed to use width attribute, margin attribute but nothing changes.

Thank you very much.

like image 299
Milos Cuculovic Avatar asked Sep 06 '12 06:09

Milos Cuculovic


People also ask

How do you put a space between radio buttons in HTML?

The margin-right: 25px creates the space because the input tag is a radio, the text doesn't count into it. So it is just the little rond and if you write in your CSS to put a space at the right of it, it will put the space between the text and the rond input element.

How do I increase the space between two radio buttons?

If you want the circle size changed of radio buttons then there's a 'Radio Size' property to change. If you need spacing between each radio options then there's a 'Line Height' property to increase as per your preference. Thanks @Ethan_R .

Can we select multiple radio buttons at once that are grouped together?

Only one radio button in a group can be selected at the same time.


1 Answers

Check working example on jsbin

Also, here is the code:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <td align="left">
            CHF <input type="radio" name="currency"  id="chf_currency" checked="checked" onChange="currencyChanged()" />
            USD <input type="radio" name="currency" id="usd_currency" onChange="currencyChanged()"/>
            EUR <input type="radio" name="currency" onChange="currencyChanged()"/>
</td>
</body>
</html>

CSS:

input[type="radio"]{
  margin: 0 10px 0 10px;
}
like image 111
halofourteen Avatar answered Oct 13 '22 22:10

halofourteen