set text inside a check box - css

Question

Hi is it possible to add text inside check box replacing the tick icon.
I am could not achieve it with this code could someone suggest me how to make a size selection box with a text inside it
<ion-col>
<p>Choose the size</p>
<ion-item>
<ion-checkbox >S</ion-checkbox>
</ion-item>
</ion-col>
Help me to bring out this type of UI

Answer 1

You can hide the input and use the label to select the checkbox. Then style your label like in the example below, using :not(:checked) and :checked selectors. Same logic can be applied to radio buttons.
ul {
padding: 0;
margin: 0;
clear: both;
}
li{
list-style-type: none;
list-style-position: outside;
padding: 10px;
float: left;
}
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
position: absolute;
left: -9999%;
}
input[type="checkbox"] + label {
display: inline-block;
padding: 10px;
cursor: pointer;
border: 1px solid black;
color: black;
background-color: white;
margin-bottom: 10px;
}
input[type="checkbox"]:checked + label {
border: 1px solid white;
color: white;
background-color: black;
}
<ul>
<li>
<input type="checkbox" id="check_1" name="check_1" value="check_1">
<label for="check_1">S</label>
</li>
<li>
<input type="checkbox" id="check_2" name="check_2" value="check_2">
<label for="check_2">M</label>
</li>
<li>
<input type="checkbox" id="check_3" name="check_3" value="check_3">
<label for="check_3">L</label>
</li>
<li>
<input type="checkbox" id="check_4" name="check_4" value="check_4">
<label for="check_4">XL</label>
</li>
</ul>

Answer 2

Updated
check updated demo here
Add the following Js to get the relevant radio value
JS:
$("body").on("click", "label", function(e) {
var getValue = $(this).attr("for");
var goToParent = $(this).parents(".select-size");
var getInputRadio = goToParent.find("input[id = " + getValue + "]");
console.log(getInputRadio.attr("id"));
});
I assume that the user select only one size at a time. if user can select the multiple size modify the example with checkbox.
Try this
Check Demo here
HTML:
<div class="select-size">
<input type="radio" name="s-size" id="small" checked/>
<input type="radio" name="s-size" id="medium" />
<input type="radio" name="s-size" id="large" />
<input type="radio" name="s-size" id="x-large" />
<input type="radio" name="s-size" id="xx-large" />
<label for="small">S</label>
<label for="medium">M</label>
<label for="large">L</label>
<label for="x-large">XL</label>
<label for="xx-large">XXL</label>
</div>
CSS:
.select-size input{
display: none;
}
label {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
border: 1px solid #ddd;
line-height: 50px;
cursor: pointer
}
#small:checked ~ label[for="small"],
#medium:checked ~ label[for="medium"],
#large:checked ~ label[for="large"],
#x-large:checked ~ label[for="x-large"],
#xx-large:checked ~ label[for="xx-large"] {
background: #999;
color: #ffffff;
}