Search code examples
cssradio-buttonmaterialize

How to put text inside radio button?

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?

Solution

  • 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

    preview