Radio Button Position CSS

3
votes

I'm trying to style this radio buttons for gender choice as shown in the image below:

enter image description here

.radio {
  margin: 0.1rem;
  margin-left: 2.5rem;
  margin-top:
}

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

.radio input[type="radio"]+.radio-label:before {
  content: '';
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  position: relative;
  /* position */
  top: -3.4em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.radio input[type="radio"]:checked+.radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}

.radio input[type="radio"]:focus+.radio-label:before {
  outline: none;
  border-color: #3197EE;
}

.radio input[type="radio"]:disabled+.radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}

.radio input[type="radio"]+.radio-label:empty:before {
  margin-right: 0;
}
<div class="form-group">
  <p>Sex <span>*</span></p>
  <span class="icon-case"><i class="fas fa-venus-mars"></i></span>
  <input type="text" name="sex" id="ville" data-rule="required" data-msg="Vérifiez votre saisie sur les champs : Le champ 'Ville' doit être renseigné." />
  <div class="validation"></div>
  <div class="radio">
    <input id="radio-1" name="radio" type="radio" checked>
    <label for="radio-1" class="radio-label">Male</label>
  </div>

  <div class="radio">
    <input id="radio-2" name="radio" type="radio">
    <label for="radio-2" class="radio-label">Female</label>
  </div>
</div>

I want the Male and Female label to be in the right position, which is beside the respective buttons, however adding an ID to the label tag wouldn't allow me to do so.

EDIT enter image description here

1
htmlcsstwitter-bootstrap
I've stopped short of tagging it for you, but if you're using Twitter Bootstrap framework, please tag as such. – esqew
@esqew added, thanks for the reminder – rwd
Remember to consider non binary gender – ryanve
@ryanve will do, this is just for test haha – rwd
@rwd Lemme know if that's what you expect. Look at my answer. 😊 – Praveen Kumar Purushothaman

1 Answers

3
votes

Tried a bit of swap. I got till this:

.radio {
  margin: 0.1rem;
  margin-left: 2.5rem;
  margin-top:
}

.radio input[type="radio"] {
  position: relative;
  opacity: 0;
}
.radio input[type="radio"] + .radio-label:before {
  content: '';
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  position: relative;
  /* position */
  margin-right: 1em;
  margin-top: -2px;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: #3197EE;
}
.radio input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<div class="form-group">
  <p class="d-inline-block align-top">Sex <span>*</span></p>
  <span class="icon-case"><i class="fas fa-venus-mars"></i></span>
  <div class="d-inline-block">
    <div class="radio">
      <input id="radio-1" name="radio" type="radio" checked />
      <label for="radio-1" class="radio-label">Male</label>
    </div>
    <div class="radio">
      <input id="radio-2" name="radio" type="radio" />
      <label for="radio-2" class="radio-label">Female</label>
    </div>
  </div>
  <div class="validation"></div>
  <input type="text" name="sex" id="ville" data-rule="required" data-msg="Vérifiez votre saisie sur les champs : Le champ 'Ville' doit être renseigné." />
</div>

Preview

preview

Changes

A bit of change in CSS:

changes