Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Create a radio button with half circle

February 15 (4 years ago)

Edited February 15 (4 years ago)
ThiagoR
Sheet Author

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:


February 15 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

https://wiki.roll20.net/CSS_Wizardry#Checkbox_and_Radio_Input_Styling


February 16 (4 years ago)
ThiagoR
Sheet Author

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

February 16 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

As the guide said, it's generally hard to style/change looks of radio & checkboxes, and it's better to hide the original, and instead create some other html element like a <span>, which changes looks based in the value of the checkbox/radio button. That first example replaces radio inputs with <button type=action>, 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 <span> elements for the visible part of it: https://wiki.roll20.net/CSS_Wizardry#Alternative_Checkboxes

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. https://github.com/Roll20/roll20-character-sheets/tree/master/FreeSpacer

February 16 (4 years ago)
Kraynic
Pro
Sheet Author

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

February 16 (4 years ago)
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator

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. 

Radio/Checkbox with Labels (HTML + CSS only)

https://jsfiddle.net/medieve/rfkvu3hm/

My basic code but with half-circles

https://jsfiddle.net/medieve/0j3d94oL/


February 16 (4 years ago)
ThiagoR
Sheet Author

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.

February 16 (4 years ago)
Richard T.
Pro
Marketplace Creator
Sheet Author
Compendium Curator

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. 

March 03 (4 years ago)
ThiagoR
Sheet Author

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

<h1 style="text-align: center" data-i18n="Attributes" >Atributos</h1>

<div class="sheet-3colrow">
    <div class="sheet-col">
        <h3 style="text-align: center" data-i18n="Physical">Físicos</h3>
    </div>
    <div class="sheet-col">
        <h3 style="text-align: center" data-i18n="Mental">Mentais</h3>
    </div>
</div>
<div class="sheet-colrow" >
    <div class="sheet-col" style="width:120px">
        <h4 data-i18n="Strength">Força</h4> 
        <h4 data-i18n="Agility">Agilidade</h4>
        <h4 data-i18n="Resilience">Resiliência</h4>
    </div>
    <div class="sheet-col" style="width:150px">
        <label><input type="radio" value="0" name="radio"><span></span></label>
        <label><input type="radio" value="1" name="radio"><span></span></label>
        <label><input type="radio" value="2" name="radio"><span></span></label>
        <label><input type="radio" value="3" name="radio"><span></span></label>
    </div>
    
</div>