Revision as of 00:36, 27 April 2017

Styling Checkboxes and Radio Buttons

Live Demo

Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to hide the actual checkbox/radio and put a more cooperative element underneath.

<input type="checkbox"><span></span>
<input type="radio" name="attr_r"><span></span>
<input type="radio" name="attr_r"><span></span>
<input type="radio" name="attr_r"><span></span>
<input type="radio" name="attr_r"><span></span>
<input type="radio" name="attr_r"><span></span>

/* Hide actual radio/checkbox */
input[type="radio"],
input[type="checkbox"] {
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* Fake radio/checkbox */
input[type="radio"] + span::before,
input[type="checkbox"] + span::before {
    margin-right: 4px;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 2px #ccc;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

/* Fake radio */
input[type="radio"] + span::before {
    content: "";
    width: 12px;
    height: 12px;
    font-size: 24px;
    border-radius: 50%;
}

input[type="radio"]:checked + span::before {
    content: "•";
}

/* Fake checkbox */
input[type="checkbox"] + span::before {
    content: "";
    width: 14px;
    height: 14px;
    font-size: 12px;
    border-radius: 3px;
}

input[type="checkbox"]:checked + span::before {
    content: "✓";
}

The key here is the opacity: 0; set on the actual input, and then the width, height, and content set on the span::before immediately following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.

Note: Because of the way this is set up, if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.

Alternative Checkboxes

Live Demo

You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.

/* Fake checkbox */
input[type="checkbox"] + span::before {
    margin-right: 4px;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    content: "▼";
    width: 14px;
    height: 14px;
    font-size: 12px;
}

input[type="checkbox"]:checked + span::before {
    content: "►";
}

Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as content: url(http://i.imgur.com/90HuQPr.png);

Fill Radio Buttons to the Left

Live Demo

A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: @{Strength_1} * 1 + @{Strength_2} * 1 + ...

However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.

<input type="radio" name="attr_r" value="1" checked="checked"><span></span>
<input type="radio" name="attr_r" value="2"><span></span>
<input type="radio" name="attr_r" value="3"><span></span>
<input type="radio" name="attr_r" value="4"><span></span>
<input type="radio" name="attr_r" value="5"><span></span>

/* Hide actual radio */
input[type="radio"] {
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* Fake radio */
input[type="radio"] + span::before {
    margin-right: 4px;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 2px #ccc;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
    content: "•";
    width: 12px;
    height: 12px;
    font-size: 24px;
    border-radius: 50%;
}

/* Remove dot from all radios _after_ selected one */
input[type="radio"]:checked ~ input[type="radio"] + span::before {    
    content: "";
}

Here, all radio buttons are styled by default to appear as though they're checked. The radio buttons after the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two content lines.

To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two content lines and change the last selector to this:

input[type="radio"]:checked ~ input[type="radio"] + span::before,
input[type="radio"]:checked + span::before

Note: If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include checked="checked" on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with value="0" checked="checked" and without the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.

Note: All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.

Circular Layouts

Live Demo

Some character sheets have rather interesting layouts. Mage: the Ascension, for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.

<div>
    <div>
        <input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span>
    </div>
    <div>
        <input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span>
    </div>
    <div class="sheet-marker">•</div>
</div>

/* Hide actual checkbox */
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    z-index: 1;
    margin-top: 6px;
}

/* Fake checkbox */
input[type="checkbox"] + span::before {
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: middle;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 2px #ccc;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
    position: relative;
    content: "";
    width: 14px;
    height: 14px;
    font-size: 12px;
    border-radius: 3px;
}

/* Styles unique to fake checkbox (checked) */
input[type="checkbox"]:checked + span::before {
    content: "✓";
    color: #a00;
    box-shadow: 0 0 2px transparent;
}

/* Position checkboxes vertically in circle */
input.sheet-top  { margin-top: 5px; }
input.sheet-top + span::before { top: 0px; }
input.sheet-mid-eighth { margin-top: 12px; }
input.sheet-mid-eighth + span::before  { top: 7px; }
input.sheet-mid-quarter { margin-top: 27px; }
input.sheet-mid-quarter + span::before  { top: 22px; }
input.sheet-mid-three-eighth { margin-top: 45px; }
input.sheet-mid-three-eighth + span::before  { top: 40px; }
input.sheet-middle { margin-top: 67px; }
input.sheet-middle + span::before  { top: 62px; }
input.sheet-middle-2 { margin-top: 73px; }
input.sheet-middle-2 + span::before  { top: 68px; }
input.sheet-mid-five-eighth { margin-top: 95px; }
input.sheet-mid-five-eighth + span::before  { top: 90px; }
input.sheet-mid-three-quarter { margin-top: 113px; }
input.sheet-mid-three-quarter + span::before  { top: 108px; }
input.sheet-mid-seven-eighth { margin-top: 127px; }
input.sheet-mid-seven-eighth + span::before  { top: 122px; }
input.sheet-bottom { margin-top: 135px; }
input.sheet-bottom + span,
input.sheet-bottom + span::before  { top: 130px; }

/* Position checkboxes horizontally in circle */
input.sheet-left-1 { margin-left: 14px; }
input.sheet-left-1 + span::before  { left: 14px; }
input.sheet-left-2 { margin-left: 1px; }
input.sheet-left-2 + span::before  { left: 1px; }
input.sheet-left-3 { margin-left: -4px; }
input.sheet-left-3 + span::before  { left: -4px; }
input.sheet-left-4 { margin-left: -5px; }
input.sheet-left-4 + span::before  { left: -5px; }
input.sheet-left-5 { margin-left: -2px; }
input.sheet-left-5 + span::before  { left: -2px; }
input.sheet-left-6 { margin-left: 1px; }
input.sheet-left-6 + span::before  { left: 1px; }
input.sheet-left-7 { margin-left: 3px; }
input.sheet-left-7 + span::before  { left: 3px; }
input.sheet-left-8 { margin-left: 2px; }
input.sheet-left-8 + span::before  { left: 2px; }
input.sheet-left-9 { margin-left: -4px; }
input.sheet-left-9 + span::before  { left: -4px; }
input.sheet-left-10 { margin-left: -16px; }
input.sheet-left-10 + span::before  { left: -16px; }

/* Rotate checkboxes */
input.sheet-wheel9,
input.sheet-wheel9 + span::before { transform: rotate(9deg); }
input.sheet-wheel27,
input.sheet-wheel27 + span::before { transform: rotate(27deg); }
input.sheet-wheel45,
input.sheet-wheel45 + span::before { transform: rotate(45deg); }
input.sheet-wheel63,
input.sheet-wheel63 + span::before { transform: rotate(63deg); }
input.sheet-wheel81,
input.sheet-wheel81 + span::before { transform: rotate(81deg); }
input.sheet-wheel99,
input.sheet-wheel99 + span::before { transform: rotate(99deg); }
input.sheet-wheel117,
input.sheet-wheel117 + span::before { transform: rotate(117deg); }
input.sheet-wheel135,
input.sheet-wheel135 + span::before { transform: rotate(135deg); }
input.sheet-wheel153,
input.sheet-wheel153 + span::before { transform: rotate(153deg); }
input.sheet-wheel171,
input.sheet-wheel171 + span::before { transform: rotate(171deg); }

div.sheet-marker {
    margin: 36px 0px 0px 5px;
    font-size: 20px;
}

Hide Areas

Live Demo

You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (+) used by custom checkboxes, you should use the sibling selector (~).

<div>
    <input type="checkbox" class="sheet-arrow">
    <h4>Stuff and Things</h4>
    <div class="sheet-body">
        <input type="text" placeholder="Name" name="attr_name"><br>
        <input type="text" placeholder="Description" name="attr_description">
        <input type="number" min="0" max="20" value="0" name="attr_level"><br>
        <textarea placeholder="Fulltext" name="attr_bio"></textarea>
    </div>
</div>
<div>
    <input type="checkbox" class="sheet-arrow">
    <h4>More Stuff</h4>
    <div class="sheet-body">
        <input type="text" placeholder="Name" name="attr_alternative-name"><br>
        <input type="text" placeholder="Description" name="attr_alternative-description">
        <input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br>
        <textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea>
    </div>
</div>
<div>
    <input type="checkbox" class="sheet-arrow">
    <h4>Other Things</h4>
    <div class="sheet-body">
        <input type="text" placeholder="Name" name="attr_class-name><br>
        <input type="text" placeholder="Description" name="attr_class-description">
        <input type="number" min="0" max="20" value="0" name="attr_class-level"><br>
        <textarea placeholder="Fulltext" name="class-bio"></textarea>
    </div>
</div>

input.sheet-arrow {
    float: left;
}

input.sheet-arrow:checked ~ div.sheet-body {
    display: none;
}

Whenever one of the checkboxes in this example is checked, the following div becomes hidden.

Tabs

Live demo

A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.

<input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span>

<div class="sheet-tab-content sheet-tab1">
    <h1>Tab 1</h1>
    Lorem ipsum dolor sit amet
</div>

<div class="sheet-tab-content sheet-tab2">
    <h1>Tab the Second</h1>
    consectetur adipisicing elit
</div>

<div class="sheet-tab-content sheet-tab3">
    <h1>3rd Tab</h1>
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>

<div class="sheet-tab-content sheet-tab4">
    <h1>Fourth Tab</h1>
    Ut enim ad minim veniam
</div>

div.sheet-tab-content { display: none; }

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }

input.sheet-tab {
    width: 150px;
    height: 20px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -1.5px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

input.sheet-tab + span::before {
    content: attr(title);
    border: solid 1px #a8a8a8;
    border-bottom-color: black;
    text-align: center;
    display: inline-block;
    background: #fff;
    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    width: 150px;
    height: 20px;
    font-size: 18px;
    position: absolute;
    top: 12px;
    left: 13px;
}

input.sheet-tab:checked + span::before {
    background: #dcdcdc;
    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    border-bottom-color: #fff;
}

input.sheet-tab:not(:first-child) + span::before { border-left: none; }

input.sheet-tab2 + span::before {
    background: #fee;
    background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
    left: 163px;
}

input.sheet-tab2:checked + span::before {
    background: #dcdcdc;
    background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
    border-bottom-color: #fcecec;
}

input.sheet-tab3 + span::before { left: 313px; }

input.sheet-tab4 + span::before { left: 463px; }

div.sheet-tab-content {
    border: 1px solid #a8a8a8;
    border-top-color: #000;
    margin: 2px 0 0 5px;
    padding: 5px;
}

div.sheet-tab2 { background-color: #fcecec; }

The key to take away from this is that we have a set of radio buttons which are siblings to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the :checked property to show the tab content associated with that particular radio button.

The rest of this example shows off means to make your tabs look pretty, such as using content: attr(title) to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.

Hexagons

Live demo

<div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px">		
    <div class="sheet-inner">
        <h4>Stat</h4>
        <input type="number" style="width: 50%">
    </div>		
    <div class="sheet-corner-1"></div>
    <div class="sheet-corner-2"></div>		
</div>

.sheet-hex {
    width: 100px;
    height: 57px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;			
    background-size: auto 173px;							
    position: relative;
    float: left;
    margin: 25px 5px;
    text-align: center;
    zoom: 1;
}

.sheet-hex.sheet-hex-gap {
    margin-left: 86px;
}

.sheet-hex a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999em;
    position: absolute;
    top: 0;
    left: 0;
}

.sheet-hex .sheet-corner-1,
.sheet-hex .sheet-corner-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;								
    z-index: -2;						
    overflow: hidden;		
    backface-visibility: hidden;			
}

.sheet-hex .sheet-corner-1 {
    z-index:-1;
    transform: rotate(60deg);
}

.sheet-hex .sheet-corner-2 {
    transform: rotate(-60deg);
}

.sheet-hex .sheet-corner-1::before,
.sheet-hex .sheet-corner-2::before {
    width: 173px;
    height: 173px;
    content: '';
    position: absolute;
    background: inherit;
    top: 0;
    left: 0;
    z-index: 1;
    background: inherit;
    background-repeat: no-repeat;
    backface-visibility: hidden;				  
}

.sheet-hex .sheet-corner-1::before {
    transform: rotate(-60deg) translate(-87px, 0px);	
    transform-origin: 0 0;
}

.sheet-hex .sheet-corner-2::before {
    transform: rotate(60deg) translate(-48px, -11px);	
    bottom: 0;
}

/* Custom styles*/
.sheet-hex .sheet-inner { color: #eee; }

.sheet-hex h4 {
    font-family: 'Josefin Sans', sans-serif;		
    margin: 0;			
}

.sheet-hex hr {
    border: 0;
    border-top: 1px solid #eee;
    width: 60%;
    margin: 15px auto;
}

.sheet-hex p {
    font-size: 16px;
    font-family: 'Kotta One', serif;
    width: 80%;
    margin: 0 auto;
}

.sheet-hex.sheet-hex-1 { background: #74cddb; }
.sheet-hex.sheet-hex-2 { background: #f5c53c; }
.sheet-hex.sheet-hex-3 { background: #80b971; }

Note: Make sure the hexagon's width is 57% of the hexagon's height.

Icon Fonts

An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the font-family property. For example, something like:

<p>A Gem: <span style="font-family: 'Pictos Three'">a</span></p>

Would produce:

A Gem: a

Pictos

Pictos Custom

Pictos Three

dicefontd4

dicefontd6

dicefontd8

dicefontd10

dicefontd12

dicefontd20

dicefontd30

fontello

abcdefg