Create a radio button with half circle

I would like to create a radio button but instead of having the shape of a circle, it would have the shape of a half circle, is there a way to do this through CSS? Sample image:

<a href="https://wiki.roll20.net/CSS_Wizardry#Checkbox_and_Radio_Input_Styling" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Checkbox_and_Radio_Input_Styling</a>

Hi Andreas, thanks for helping, unfortunately I didn't understand how to change the radio buttons format with this link.

As the guide said, it's generally hard to style/change looks of radio &amp; checkboxes, and it's better to hide the original, and instead create some other html element like a &lt;span&gt;, which changes looks based in the value of the checkbox/radio button. That first example replaces radio inputs with &lt;button type=action&gt;, which are then more easily styled to look different. The example right under it might be more helpful, which still uses the checkboxes but uses &lt;span&gt; elements for the visible part of it: <a href="https://wiki.roll20.net/CSS_Wizardry#Alternative_Checkboxes" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Alternative_Checkboxes</a> Styling a input type="radio" or an input type="checkox" is fairly similar. If that doesn't do it either, you can try take a look at the Free Spacer char sheet code, that for several checkboxes uses images to determine their looks. <a href="https://github.com/Roll20/roll20-character-sheets/tree/master/FreeSpacer" rel="nofollow">https://github.com/Roll20/roll20-character-sheets/tree/master/FreeSpacer</a>

Also, for something like this, I highly recommend creating a specific sheet sandbox to just mess with your checkbox display method.&nbsp; That way you can be absolutely sure something works without messing with (and possibly messing up) your sheet code.&nbsp; Then you plug in what you have designed into your sheet with fewer edits of your full sheet.&nbsp; For me, it cut down on confusion (at least a little).

What's the behavior of your half circles? What do they look like when Unchecked vs Checked? You could probably do this through CSS with border radius or you can simply use images to represent your radio states. As far as the how, I'll go ahead and give you how I've been doing my input reskin code which I'll probably put up on the wiki later as an updated pure HTML/CSS.&nbsp; Radio/Checkbox with Labels (HTML + CSS only) <a href="https://jsfiddle.net/medieve/rfkvu3hm/" rel="nofollow">https://jsfiddle.net/medieve/rfkvu3hm/</a> My basic code but with half-circles <a href="https://jsfiddle.net/medieve/0j3d94oL/" rel="nofollow">https://jsfiddle.net/medieve/0j3d94oL/</a>

the behavior of the half circle is the same as a normal radio button as in the vampire the masquerade character sheet, it would change only the aesthetics, with two half circles forming a complete circle, only separated from each other. Justification: the system I play looks like storyteller (vampire, werewolf, etc ...), but in storyteller each "ball" (radio button) equals 1 dice and in the system I play each 2 "balls" equals 1 dice. It may seem an exaggeration but for a novice, or experienced but already used to storyteller, it is easier for him to understand that two half-balls form a dice than two balls form a dice.

Okay, I guessed correctly than, I had to fix a couple things that didn't save in the second jsfiddle I posted but that should do what I think you are looking for.&nbsp;

Hi Richard T. Thank you very much for your answer helped me to understand that it is not impossible to accomplish what I have in mind. Some questions arose and I would like to ask for your help again: 1 - Using the half-circle formatting you passed, when selecting a circle, it is black (filled) and the previous one is white (not filled), it would be possible to keep the previous circles (left) of the last selected circle also filled ? 2 - Afterwards it is possible to "calculate" how many circles are marked? 3 - I'm not managing to keep the half-circles aligned, they are vertical, could you help me with that too? Here is the code: CSS input { opacity: none; height: 0px; width: 0px; position: absolute; } input + span { display: inline-block; content: ''; width: 0.5rem; height: 1rem; background: white; border: 1px black solid; } input:checked + span { background: black; } label:nth-of-type(odd) input + span { border-radius: 1rem 0 0 1rem; } label:nth-of-type(even) input + span { border-radius: 0% 1rem 1rem 0%; } HTML &lt;h1 style="text-align: center" data-i18n="Attributes" &gt;Atributos&lt;/h1&gt; &lt;div class="sheet-3colrow"&gt; &lt;div class="sheet-col"&gt; &lt;h3 style="text-align: center" data-i18n="Physical"&gt;Físicos&lt;/h3&gt; &lt;/div&gt; &lt;div class="sheet-col"&gt; &lt;h3 style="text-align: center" data-i18n="Mental"&gt;Mentais&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-colrow" &gt; &lt;div class="sheet-col" style="width:120px"&gt; &lt;h4 data-i18n="Strength"&gt;Força&lt;/h4&gt; &lt;h4 data-i18n="Agility"&gt;Agilidade&lt;/h4&gt; &lt;h4 data-i18n="Resilience"&gt;Resiliência&lt;/h4&gt; &lt;/div&gt; &lt;div class="sheet-col" style="width:150px"&gt; &lt;label&gt;&lt;input type="radio" value="0" name="radio"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt; &lt;label&gt;&lt;input type="radio" value="1" name="radio"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt; &lt;label&gt;&lt;input type="radio" value="2" name="radio"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt; &lt;label&gt;&lt;input type="radio" value="3" name="radio"&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;