Easy Way To Transforming Radio Button Lists into Push Button Lists: A Step-by-Step

Transforming Radio Button Lists into Push Button Lists

Transforming Radio Button Lists into Push Button Lists is different, so it may not be possible to directly convert a radio button into a push button. However, you can achieve a similar effect by using some CSS

Here’s an example of how you can make a radio button list appear like a push button list :

HTML

<asp:RadioButtonList CssClass="radioButtonList" ID="RB1" RepeatDirection="Horizontal">
	<Items>													
              <asp:ListItem Text="1" Value="1"></asp:ListItem>
	      <asp:ListItem Text="2" Value="2"></asp:ListItem>
	     <asp:ListItem Text="3" Value="3"></asp:ListItem>
       </Items>						
</asp:RadioButtonList>

CSS

.radioButtonList input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
}

.radioButtonList label {
	background-color: #fff;
	padding: .375rem .75rem;
	font-family: sans-serif;
	font-size: 1rem;
	border: 1px solid #ccc !important;
	border-radius: 2px;
}

.d-inline-flex .radioButtonList label {
	margin: 0;
}

.radioButtonList input[type="radio"]:checked + label {
	background-color: #e9ecef;
	border-color: transparent;
}

Out put

The above code will create a label that looks like a push button and will hide the radio button using CSS. When the label is clicked, the corresponding radio button will be selected.

Note that this is just an example and you may need to modify the CSS to match the look and feel of your website.