Abdul M. Diaz Abdul M. Diaz - 5 months ago 15
HTML Question

How to center radio button selection on input check?

I am trying to center the blue circle that comes up when you click the radio button.



body {
margin: 3em;
font-size: 24px;
font-family: arial;
}

/* Input Controls */

label {
line-height: 1em;
position: relative;
overflow: show;
cursor: pointer;
margin-right: 1em;
}

label input {
margin: 0 .15em 0 0;
padding: 0;
vertical-align: middle;
cursor: pointer;
position: relative;
top: -.1em;
}

input[type="radio"], input[type="checkbox"] {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
font-size: 1em;
line-height: 1
}

input[type="radio"]:before, input[type="radio"]:after, input[type="checkbox"]:before, input[type="checkbox"]:after {
width: 100% !important;
height: 100% !important;
display: inline-block;
content:'';
font-family: 'icons-presto', fantasy !important;
font-style: normal !important;
font-weight: normal !important;
line-height: 1;
}

input[type="radio"]:before, input[type="checkbox"]:before {
background: rgb(254,234,234);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(254,234,234,1) 100%); /* W3C — Add Browser extension versions for greater backwards compatibility */
border: 1px solid rgb(204,170,170);
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
position: relative;
top: 0;
left: 0;
}

input[type="radio"]:after, input[type="checkbox"]:after {
color: rgb(65,146,238);
position: absolute;
opacity: 0;
text-align: center;
top: 0;
left: 0;
}

input[type="radio"]:checked:before, input[type="checkbox"]:checked:before {
background: rgb(234,234,254);
background: linear-gradient(to bottom, rgba(214,214,254,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
border-color: rgba(65,146,238,.5);
box-shadow: 1px 1px 1px rgba(0,0,0,.1) inset;
}

input[type="radio"]:before {
border-radius: 2em;
}

input[type="radio"]:after {
content: "•";
font-size: 2em;
line-height: .35;
left: .025em;
}

input[type="radio"]:hover:after {
opacity: .25;
}

input[type="radio"]:checked:after {
opacity: 1;
}

input[type="checkbox"]:before {
border-radius: .25em;
color:rgba(170,170,170,0);
}

input[type="checkbox"]:after {
content: "✔";
}

input[type="checkbox"]:hover:after {
opacity: .25;
}

input[type="checkbox"]:checked:after {
opacity: 1;
}

<form>


<label for="option1">
<input type="radio" name="radiotest" value="option1" id="option1" />
Option 1
</label>

<label for="option2">
<input type="radio" name="radiotest" value="option2" id="option2" />
Option 2
</label>

<label for="option3">
<input type="radio" name="radiotest" value="option3" id="option3" />
Option 3
</label>

<label for="option4">
<input type="radio" name="radiotest" value="option4" id="option4" />
Option 4
</label>

<hr>


<label for="c1">
<input type="checkbox" id="c1" name="cc" />
Checkbox 1
</label>
<label for="c2">
<input type="checkbox" id="c2" name="cc" />
Checkbox 2
</label>
<label for="c3">
<input type="checkbox" id="c3" name="cc" />
Checkbox 3
</label>
<label for="c4">
<input type="checkbox" id="c4" name="cc" />
Checkbox 4
</label>


</form>




Answer

Update this. It may solve your issue.

input[type="radio"]:after {
      content: "•";
  font-size: 2em;
  line-height: .55;
  left: .025em;
}

body {
  margin: 3em;
  font-size: 24px;
  font-family: arial;
}
/* Input Controls */

label {
  line-height: 1em;
  position: relative;
  overflow: show;
  cursor: pointer;
  margin-right: 1em;
}
label input {
  margin: 0 .15em 0 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  top: -.1em;
}
input[type="radio"],
input[type="checkbox"] {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1
}
input[type="radio"]:before,
input[type="radio"]:after,
input[type="checkbox"]:before,
input[type="checkbox"]:after {
  width: 100% !important;
  height: 100% !important;
  display: inline-block;
  content: '';
  font-family: 'icons-presto', fantasy !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1;
}
input[type="radio"]:before,
input[type="checkbox"]:before {
  background: rgb(254, 234, 234);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(254, 234, 234, 1) 100%);
  /* W3C — Add Browser extension versions for greater backwards compatibility */
  border: 1px solid rgb(204, 170, 170);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
  position: relative;
  top: 0;
  left: 0;
}
input[type="radio"]:after,
input[type="checkbox"]:after {
  color: rgb(65, 146, 238);
  position: absolute;
  opacity: 0;
  text-align: center;
  top: 0;
  left: 0;
}
input[type="radio"]:checked:before,
input[type="checkbox"]:checked:before {
  background: rgb(234, 234, 254);
  background: linear-gradient(to bottom, rgba(214, 214, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
  /* W3C */
  border-color: rgba(65, 146, 238, .5);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .1) inset;
}
input[type="radio"]:before {
  border-radius: 2em;
}
input[type="radio"]:after {
  content: "•";
  font-size: 2em;
  line-height: .55;
  left: .025em;
} 
input[type="radio"]:hover:after {
  opacity: .25;
}
input[type="radio"]:checked:after {
  opacity: 1;
}
input[type="checkbox"]:before {
  border-radius: .25em;
  color: rgba(170, 170, 170, 0);
}
input[type="checkbox"]:after {
  content: "✔";
}
input[type="checkbox"]:hover:after {
  opacity: .25;
}
input[type="checkbox"]:checked:after {
  opacity: 1;
}
<form>


  <label for="option1">
    <input type="radio" name="radiotest" value="option1" id="option1" />Option 1
  </label>

  <label for="option2">
    <input type="radio" name="radiotest" value="option2" id="option2" />Option 2
  </label>

  <label for="option3">
    <input type="radio" name="radiotest" value="option3" id="option3" />Option 3
  </label>

  <label for="option4">
    <input type="radio" name="radiotest" value="option4" id="option4" />Option 4
  </label>

  <hr>


  <label for="c1">
    <input type="checkbox" id="c1" name="cc" />Checkbox 1
  </label>
  <label for="c2">
    <input type="checkbox" id="c2" name="cc" />Checkbox 2
  </label>
  <label for="c3">
    <input type="checkbox" id="c3" name="cc" />Checkbox 3
  </label>
  <label for="c4">
    <input type="checkbox" id="c4" name="cc" />Checkbox 4
  </label>


</form>

Comments