How to put text inside radio button? - css

Question

I am trying to put a letter inside a radio button (with Materialize framework) like the A and B in this image.
How do I do this?

Answer 1

Here is the customize radio button.
see the comments given in css.
input[type="radio"] {
width: 30px;
height: 30px;
border-radius: 15px;
border: 2px solid #1FBED6;
background-color: white;
-webkit-appearance: none; /*to disable the default appearance of radio button*/
-moz-appearance: none;
}
input[type="radio"]:focus { /*no need, if you don't disable default appearance*/
outline: none; /*to remove the square border on focus*/
}
input[type="radio"]:checked { /*no need, if you don't disable default appearance*/
background-color: #1FBED6;
}
input[type="radio"]:checked ~ span:first-of-type {
color: white;
}
label span:first-of-type {
position: relative;
left: -27px;
font-size: 15px;
color: #1FBED6;
}
label span {
position: relative;
top: -12px;
}
<label>
<input type="radio" name="options"/>
<span>A</span><span>Option A</span>
</label>
<br/>
<label>
<input type="radio" name="options"/>
<span>B</span><span>Option B</span>
</label>
<br/>
<label>
<input type="radio" name="options"/>
<span>C</span><span>Option C</span>
</label>
<br/>
<label>
<input type="radio" name="options"/>
<span>D</span><span>Option D</span>
</label>

Answer 2

You cannot do that. But instead, you can make something similar using CSS:
label {display: block; padding: 5px; position: relative; padding-left: 20px;}
label input {display: none;}
label span {border: 1px solid #ccc; width: 15px; height: 15px; position: absolute; overflow: hidden; line-height: 1; text-align: center; border-radius: 100%; font-size: 10pt; left: 0; top: 50%; margin-top: -7.5px;}
input:checked + span {background: #ccf; border-color: #ccf;}
<h3>Select One</h3>
<label><input type="radio" name="select" /><span>a</span> Item 1</label>
<label><input type="radio" name="select" /><span>b</span> Item 2</label>
Preview