The radio type input is not aligned

1

My query is as an achievement that the input type radio is well aligned, because it is outdated.

body {
background-image: url(img/darkblue.jpg);
background-size: 100vw 100vh;
font-family: arial;
color: #fff;
background-attachment: fixed;
margin:0;}

form {
width: 400px;
margin:auto;
padding: 10px 20px;
background: rgba(0,0,0,0.4);
box-sizing: border-box;
border-radius: 7px;
}
h1{
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
input, textarea{
width: 100%;
margin-bottom: 12px;
}
 <fieldset>
    <legend>Sports practice? </legend>
    <label>
        <input type="radio" name="yes" value="yes"> Yes
    </label>
    <label>
        <input type="radio" name="no" value="no"> No
    </label>
    <label>
        <input type="radio" name="sometimes" value="sometimes"> Sometimes
    </label>
</fieldset>
    
asked by Paola 05.09.2018 в 16:43
source

3 answers

2

The problem is that you set the width of 100% to all the input including the radius (these are also input). All you have to do is apply the :not selector to ignore that these rules apply to radios. Here is an example:

body {
  background-image: url(img/darkblue.jpg);
  background-size: 100vw 100vh;
  font-family: arial;
  /*color: #fff;*/
  background-attachment: fixed;
  margin:0;
}

form {
  width: 400px;
  margin:auto;
  padding: 10px 20px;
  background: rgba(0,0,0,0.4);
  box-sizing: border-box;
  border-radius: 7px;
}

h1{
  /*color: #fff;*/
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}

input:not([type="radio"]), textarea{
  width: 100%; /* Esto hace que el radio tenga el 100% de ancho */
  margin-bottom: 12px; /* Y esto que exista en margen inferior */
}

label {
  display: block; /* Poner cada label uno debajo de otro */
  margin-bottom: 12px; /* Agregamos un margin inferior (como el que le pones a los demas input) */
}

label:last-child {
  margin-bottom: 0; /* Quitamos el margen inferior al último label. */
}
<fieldset>
  <legend>Sports practice?</legend>
  <label>
    <input name="sport-practice" type="radio" name="yes" value="yes"> Yes
  </label>
  <label>
    <input name="sport-practice" type="radio" name="no" value="no"> No
  </label>
  <label>
    <input name="sport-practice" type="radio" name="sometimes" value="sometimes"> Sometimes
  </label>
</fieldset>

Another thing, I noticed that you did not specify a name for radios. This will cause all the options to be selected. The above code is corrected so that it only lets you select an option. You just have to add the name attribute with exactly the same value in all radio type inputs.

Greetings!

    
answered by 05.09.2018 в 17:00
0

Well sometimes you have to play with the margin of the elements because many times it can give problems the line-height and can give you that effect that are not aligned, go testing by placing the margin -top with negative values to upload it or with positive values to lower it. The margin-top is applied directly to the radio type input.

    
answered by 05.09.2018 в 17:07
0

If I understand correctly, your problem is because all the inputs without discriminating which are radio or checkbox you give a width to 100% of the container, so they are not aligned to the text.

Try the following code:

input[type="radio"],
input[type="checkbox"]{
  width: initial;
}

This sets the initial width of the input by default.

An example according to your project would be:

body {
  background-image: url(img/darkblue.jpg);
  background-size: 100vw 100vh;
  font-family: arial;
  color: #fff;
  background-attachment: fixed;
  margin:0;
  }

form {
  width: 400px;
  margin:auto;
  padding: 10px 20px;
  background: rgba(0,0,0,0.4);
  box-sizing: border-box;
  border-radius: 7px;
}

h1{
  color: #fff;
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}

label{
  color: black;
}

input, textarea{
  width: 100%;
  margin-bottom: 12px;
}

input[type="radio"],
input[type="checkbox"]{
  width: initial;
}
<fieldset>
    <legend>Sports practice? </legend>
    <label>
        <input type="radio" name="yes" value="yes">
        Yes
    </label>
    <label>
        <input type="radio" name="no" value="no"> 
        No
    </label>
    <label>
        <input type="radio" name="sometimes" value="sometimes"> 
        Sometimes
    </label>
</fieldset>

Among other things, the attribute name should be the same in all radio buttons, so that they can work correctly, here is the same demo with this corrected:

body {
  background-image: url(img/darkblue.jpg);
  background-size: 100vw 100vh;
  font-family: arial;
  color: #fff;
  background-attachment: fixed;
  margin:0;
  }

form {
  width: 400px;
  margin:auto;
  padding: 10px 20px;
  background: rgba(0,0,0,0.4);
  box-sizing: border-box;
  border-radius: 7px;
  color: black;
}

h1{
  color: #fff;
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}

legend{
  color: black;
}

label{
  color: black;
  display: block; /*Obliga a cada opción a ocupar una linea al 100% estando uno sobre otro*/
}

input, textarea{
  width: 100%;
  margin-bottom: 12px;
}

input[type="radio"],
input[type="checkbox"]{
  width: initial;
}
<fieldset>
    <legend>Sports practice? </legend>
    <label>
        <input type="radio" name="option" value="yes">
        Yes
    </label>
    <label>
        <input type="radio" name="option" value="no"> 
        No
    </label>
    <label>
        <input type="radio" name="option" value="sometimes"> 
        Sometimes
    </label>
</fieldset>
    
answered by 05.09.2018 в 17:02