3
votes

aligner le contenu des pseudo éléments horizontalement et verticalement

J'ai les boutons radio css suivants mais ils ne s'alignent pas correctement.

J'aimerais savoir comment aligner correctement horizontalement et verticalement le petit cercle dans le plus grand cercle.

<div class="container">
  <fieldset class="radio-group__fieldset undefined">
    <div class="radio-group__options__container pan-zoom-tree__dependency-filter">
      <div class="radio__container radio__small radio__inline">
        <input id="depndency-view-0" name="depndency-view" type="radio" value="Activities" checked="">
        <label for="depndency-view-0">
        <div class="radio__content">Activities</div>
      </label>
      </div>
      <div class="radio__container radio__small radio__inline">
        <input id="depndency-view-1" name="depndency-view" type="radio" value="Suppliers">
        <label for="depndency-view-1">
        <div class="radio__content">Suppliers</div>
      </label>
      </div>
    </div>
  </fieldset>
</div>

.container {
      position: absolute;
    z-index: 10;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    left: 1.25rem!important;
}

.radio-group__fieldset {
  border: none;
  padding: 0;
}

.radio-group__options__container {
  display: flex;
}

.radio__container {
  margin-bottom: 0;
  position: relative;
}

.radio__container input[type=radio] {
  position: absolute;
  cursor: pointer;
  left: 0;
  top: 0;
  z-index: 1;
  margin: 0;
  zoom: 1;
  opacity: 0;
}

.radio__container input[type=radio]:checked+label::after {
  opacity: 1;
}

.radio__container label {
  position: relative;
  font-weight: 400;
  color: inherit;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}

.radio__container label::before {
  content: "";
  border: 3px solid #0065bd;
  border-radius: 50%;
}

.radio__container label::after {
  content: "";
  position: absolute;
  background-color: #0065bd;
  border: none;
  text-align: center;
  border-radius: 50%;
  opacity: 0;
}

.radio__inline label {
  margin-right: 0.625rem;
}

.radio__container.radio__inline label .radio__content {
  margin-left: 0.625rem;
}

.radio__container.radio__small input[type=radio],
.radio__container.radio__small label::after,
.radio__container.radio__small label::before {
  width: 13px;
  height: 13px;
}

.radio__container.radio__small label::before {
  border-width: 2px;
  border-radius: 50%;
}

.radio__container.radio__small label:after {
  transform: scale(0.8);
}

.radio__content {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 10%;
}

javascript html css

1 commentaires

solution rapide: gauche: 2px sur .radio__container label :: after

3 Réponses :

0
votes

Vous pouvez essayer de modifier cette règle comme suit:

<div class="container">
  <fieldset class="radio-group__fieldset undefined">
    <div class="radio-group__options__container pan-zoom-tree__dependency-filter">
      <div class="radio__container radio__small radio__inline">
        <input id="depndency-view-0" name="depndency-view" type="radio" value="Activities" checked="">
        <label for="depndency-view-0">
        <div class="radio__content">Activities</div>
      </label>
      </div>
      <div class="radio__container radio__small radio__inline">
        <input id="depndency-view-1" name="depndency-view" type="radio" value="Suppliers">
        <label for="depndency-view-1">
        <div class="radio__content">Suppliers</div>
      </label>
      </div>
    </div>
  </fieldset>
</div>

Extrait:

.container {
      position: absolute;
    z-index: 10;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    left: 1.25rem!important;
}

.radio-group__fieldset {
  border: none;
  padding: 0;
}

.radio-group__options__container {
  display: flex;
}

.radio__container {
  margin-bottom: 0;
  position: relative;
}

.radio__container input[type=radio] {
  position: absolute;
  cursor: pointer;
  left: 0;
  top: 0;
  z-index: 1;
  margin: 0;
  zoom: 1;
  opacity: 0;
}

.radio__container input[type=radio]:checked+label::after {
  opacity: 1;
}

.radio__container label {
  position: relative;
  font-weight: 400;
  color: inherit;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}

.radio__container label::before {
  content: "";
  border: 3px solid #0065bd;
  border-radius: 50%;
}

.radio__container label::after {
  content: "";
  position: absolute;
  background-color: #0065bd;
  border: none;
  text-align: center;
  border-radius: 50%;
  opacity: 0;
  left:2px;
}

.radio__inline label {
  margin-right: 0.625rem;
}

.radio__container.radio__inline label .radio__content {
  margin-left: 0.625rem;
}

.radio__container.radio__small input[type=radio],
.radio__container.radio__small label::after,
.radio__container.radio__small label::before {
  width: 13px;
  height: 13px;
}

.radio__container.radio__small label::before {
  border-width: 2px;
  border-radius: 50%;
}

.radio__container.radio__small label:after {
  transform: scale(0.8);
}

.radio__content {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 10%;
}

.radio__container label::after {
  content: "";
  position: absolute;
  background-color: #0065bd;
  border: none;
  border-radius: 50%;
  opacity: 0;
  left: 2px; /*This is the modification */
 }

0 commentaires

3
votes

Vous pouvez faire aussi très simplement comme ceci:

<input type="radio" id="r1" name="inp"> 
<input type="radio" id="r2" name="inp">
<label for="r1" id="l1">Radio1</label>
<label for="r2" id="l2">Radio2</label>

input {
  display: none;
}

label {
  display: flex;
  position: relative;
  padding-left: 30px;
  align-items: center;
  line-height: 30px;
}
label::before {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid blue;
  padding: 3px;
  box-sizing:border-box;
}

input#r1:checked ~ #l1::before,
input#r2:checked ~ #l2::before{
  background:blue content-box;
}

C'est la manière la plus simplifiée de @ TemaniAfif au lieu de l'arrière-plan radial-gradient .

<input type="radio" id="r1" name="inp"> 
<input type="radio" id="r2" name="inp">
<label for="r1" id="l1">Radio1</label>
<label for="r2" id="l2">Radio2</label>

input {
  display: none;
}

label {
  display: flex;
  position: relative;
  padding-left: 30px;
  align-items: center;
  line-height: 30px;
}
label::before {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid blue;
}

input#r1:checked ~ #l1::before {
  background: radial-gradient(blue 0%, blue 40%, transparent 50%, transparent 100%);
}

input#r2:checked ~ #l2::before {
  background: radial-gradient(blue 0%, blue 40%, transparent 50%, transparent 100%);
}

3 commentaires

@Supersharp developer.mozilla.org/en-US/docs/Web/ CSS /…

c'est une excellente réponse, la seule chose que je dirais est que l'entrée ne doit pas être affichée: aucune pour qu'elle puisse recevoir le focus pour l'accessibilité et la navigation au clavier.

@TemaniAfif merci! Je ne savais pas de cette façon. J'ai édité ma réponse.

0
votes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body style="height:900px">

<div class="container-fluid mt-3">

    <form>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="customRadio1" name="customRadio2">
            <label class="custom-control-label" for="customRadio1">RadioButton</label>
        </div>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="customRadio2" name="customRadio2">
            <label class="custom-control-label" for="customRadio2">RadioButton</label>
        </div>
</body>
</html>

0 commentaires