input[type=radio]:before radio sticking out

Question

The rounded edge is just sticking out of the square or circle so if I give before a white background the radio edge is still slightly visible.

input[type=radio] {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
}

input[type=radio]:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid grey;
  border-radius: 50%;
  /* background-color: white; */
  position: absolute;
  top: 0;
  left: 0;
}

> <input type="radio" name="r" checked>

How can I hide the radio button completely using css before?

Generally, that's not how this is done. Usually, the **whole** `input` is hidden and the `label` for it is styled to *look like* a button. — Paulie_D, May 03 '19 at 09:43
Also see - https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field — Paulie_D, May 03 '19 at 09:44
don't know why its done like this, anyway you can *position* over the full container instead of setting width and height https://jsfiddle.net/x7uLqv30/ — kukkuz, May 03 '19 at 09:49
The benefit of doing it this way is that you don't need to modify html. All other cases require some sort of container setup or label setup. For example for a checkbox it works perfect because nothing is sticking out in case of a type checkbox instead of a radio — Gert Cuykens, May 03 '19 at 09:56
yes @Gert, i like your approach otherwise you have to use outer label, div etc. I have tried to do it with default properties, please check below. — Amarjit Singh, May 03 '19 at 10:12
You should not use `input:before` in the first place. These elements are to be rendered as if an actual HTML child was inserted into the parent - but input elements can not have children in the first place. Browser support on this varies IIRC - not all browser support pseudo elements for inputs. — 04FS, May 03 '19 at 12:29

score 1 · Accepted Answer · answered May 03 '19 at 10:10

I think using visibility:hidden may help, please check below :

input[type=radio] {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  visibility: hidden;
 
}

input[type=radio]:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid grey;
  border-radius: 50%;
  /* background-color: white; */
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  
}
input[type=radio]:checked:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    /* border: 2px solid green; */
    border-radius: 50%;
    background-color: green;
    position: absolute;
    top: 5px;
    left: 5px;
    visibility: visible;
}

<input type="radio" name="r" checked>

score 1 · Answer 2 · answered May 03 '19 at 10:27

Here I've tried another way to do this by adding a span. Give it a try.

.customRadio {
  position: relative;
}
input[type="radio"] {
  opacity: 0;
  margin: 0 5px 0 0;
  transition: all 0.2s ease 0s;
}
input[type="radio"] + .radioSpan {
  background-color: transparent;
  border: 1px solid #aaaaaa;
  border-radius: 50%;
  content: "";
  height: 17px;
  left: 0;
  position: absolute;
  top: 2px;
  width: 17px;
  transition: all 0.3s ease 0s;
}
input[type="radio"]:focus + .radioSpan,
input[type="radio"]:active + .radioSpan {
  box-shadow: 0 3px 5px 0 rgba(56, 49, 132, 0.5) !important;
}
input[type="radio"]:checked + .radioSpan {
  background-color: #408BF9;
  border: 1px solid transparent;
}
input[type="radio"]:checked + .radioSpan::before {
  background-color: #ffffff;
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 9px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 9px;
  z-index: 1;
}
input[type="radio"] ~ .radioText {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  margin-left: 5px;
  text-transform: capitalize;
}

<label class="customRadio">
    <input type="radio"name="reportType" value="unsigned-report"/>
    <span class="radioSpan"></span>
    <span class="radioText">UnSigned Report</span>
</label>

yep thx, works also but prefer strict separation of content and styling. I like html that has a minimal data structure look to it :) — Gert Cuykens, May 03 '19 at 10:51

score -1 · Answer 3 · edited May 03 '19 at 12:25

-1

Kindly find following solution: HTML:

<div class="radio">
    <input type="radio" name="r" checked>
</div>

CSS:

.radio {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
}

.radio::before {
  content: "";
  visibility: hidden; // option-1
  /* opacity: 0;  // option-2 */
  /* display: none; //option-3 */
}

edited May 03 '19 at 12:25

pruthvi mandaliya

15
4

answered May 03 '19 at 09:49

Dipak Nirmal

1
2

input[type=radio]:before radio sticking out

3 Answers3