CODEWITHSUNDEEP
htmlradio-button
Milos Cuculovic
Milos Cuculovic

Reputation: 20223

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.

Upvotes: 8

Views: 88052

Answers (4)

halofourteen
halofourteen

Reputation: 1000

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;
}

Upvotes: 23

Ghassan Elias
Ghassan Elias

Reputation: 2233

If you don't want to use fixed padding to the buttons, then consider wrapping each one with <label> tag, this will make the labels clickable too.

HTML:

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

CSS:

<style type="text/css">
label + label {
    margin-left: 20px;
}
</style>

http://jsfiddle.net/9cJJ9/

Upvotes: 1

Nightgem
Nightgem

Reputation: 46

Try this:

input[type="radio"]{margin:10px 0};}

put this in the css folder or in the header section of your html file. If your putting this in your html file in your header section, it should look like this:

<style type="text/css"> 
   input[type="radio"]{margin: 10px 0};} 
</style>

Hope this helped!

Upvotes: 2

Arpit Srivastava
Arpit Srivastava

Reputation: 2235

Use like this in CSS

input[type="radio"]{
      //padding: or margin or line-height for better spaces bettween radio button according to your need and design;
}

Upvotes: 2

Related Questions