How to fix custom radio button in webforms

Question

I am using css codes for custom radio button. If i use html codes everything is ok. But i am trying to use asp:RadioButton and it renders one more tag in label. So css code is not working that way. Any idea how to fix?

Custom RadioButton HTML Code (Works Fine):

<label class="container">
   <input type="radio">
   <span class="checkmark"></span>
</label>

RadioButton ASP.NET Renders in span tag. Output of HTML (Not Working):

<label class="container">
   <span>
       <input type="radio">
       <label>Option One</label>
   </span>
   <span class="checkmark"></span>
</label>

Here is CSS Code

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

Create your own RadioButtonList adapter to change the generated html. See https://stackoverflow.com/a/57020344/5836671 (it about a checkbox but the principle is the same) — VDWWD, Aug 10 '19 at 11:25

score 0 · Answer 1 · answered Aug 10 '19 at 20:02

0

I've put your code into an aspx page.

I found that the span tag isn't closed:

<label class="container">
   **<span>**
   <input type="radio">
   <label>Option One</label>
   **<span>**
   <span class="checkmark"></span>
</label>

I closed it and it doesn't work on my page either. As I couldn't see why you would want to have that span tag I removed it. I have it like that:

<label class="container">
      <input type="radio">
      <label>Option One</label>
      <span class="checkmark"></span>
</label>

It works on my page as I can select the Radio Button and it shows in blue as per your style code. Hope this helps.

answered Aug 10 '19 at 20:02

KH S

444
1
4
8

well,i can't delete tag because when you add to your page then check your developer tool (F12) with browser. This is output of asp:radiobutton. We need a little bit touch with CSS code i guess. – Mert Aug 10 '19 at 20:58
Hm.. Maybe you could post your actual aspx page code and not the output. It might help to debug it. When I put an asp:RadioButton on the page the source code output looks different to yours. I got it working but only when you click the Option One and not the "button" itself which is probably down to the style and should be easily fixable. – KH S Aug 11 '19 at 09:16

How to fix custom radio button in webforms

1 Answers1