CODEWITHSUNDEEP
htmlcss
Hussain
Hussain

Reputation: 53

how to make label appear below radio button

I have radio buttons with labels, and i want to make the label appear below the radio button.

Here is my style code:

label {
      float: right;
      clear: none;
      display: block;
      padding: 0px 2em 0px 8px;


    }
    input[type='radio'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:1px solid black;
    border-radius:50%;
    outline:none;
    margin: 70;
}

Upvotes: 0

Views: 983

Answers (1)

CanUver
CanUver

Reputation: 1774

Do you want something like this ? 

.radios {
  padding: 50px;
  background-color: green;
}

.radio {
  display: flex;
  flex-direction: column;
  border: 1px solid gray;
}

.radio >label {
  margin-top: 10px;
}
<div class="radios">
  <div class="radio">
    <input type="radio" name="x" value="radio1" id="radio1" />
    <label for="radio1">radio 1</label>
  </div>
  <div class="radio">
    <input type="radio" name="x" value="radio2" id="radio2" />
    <label for="radio2">radio 2</label>
  </div>
</div>

Upvotes: 1

Related Questions