CODEWITHSUNDEEP
htmlcssremoving-whitespace
patrick
patrick

Reputation: 16959

How can I get rid of radio button vertical margins?

I have about 30px of vertical space between the radio buttons. Setting margin-top and margin-bottom to 0px had no effect. How can I eliminate the vertical space?

body {
  margin: 2em;
  font-family: Arial, Helvetica, sans-serif;
}

input[type="radio"] {
  opacity: 0;
}

input[type="radio"]+label {
  cursor: pointer;
  border: 1px solid #ccc;
  background: #efefef;
  color: #aaa;
  border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
  display: block;
  width: 200px;
  height: 40px;
  padding-left: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}

input[type="radio"]:checked+label {
  background: #777;
  border: 1px solid #444;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  color: white;
  margin-top: 0px;
  margin-bottom: 0px;
}
<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>

View on JSFiddle

Upvotes: 1

Views: 1055

Answers (3)

TinMonkey
TinMonkey

Reputation: 1842

just hide the actual radio buttons.

input[type="radio"] {
  display: none;
}

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105903

remove it from the flow (absloute) https://jsfiddle.net/0d227oj6/1/

body {
  margin: 2em;
  font-family: Arial, Helvetica, sans-serif;
}

input[type="radio"] {
  opacity: 0;
  position:absolute;/* removed from the flow */
}

input[type="radio"]+label {
  cursor: pointer;
  border: 1px solid #ccc;
  background: #efefef;
  color: #aaa;
  border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
  display: block;
  width: 200px;
  height: 40px;
  padding-left: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}

input[type="radio"]:checked+label {
  background: #777;
  border: 1px solid #444;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  color: white;
  margin-top: 0px;
  margin-bottom: 0px;
}
<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>

Upvotes: 1

delinear
delinear

Reputation: 2795

If your intent is to hide the radio buttons themselves and just have the labels visible, then just apply a position: absolute to remove them from the page flow:

input[type="radio"] {
    opacity: 0;
    position: absolute;
}

https://jsfiddle.net/99b6pbz7/

Upvotes: 2

Related Questions