Styling Radio buttons and Checkboxes with CSS only (no images)

In this tutorial, we style Radio Buttons and Checkboxes with pure CSS; CSS3 to be specific and without the use of images.

princebazawule.com - styling radio buttons & checkboxes with css only

 

View Radio Button Demo   View Checkbox Demo

Background

HTML forms and accompanying input elements, including radio buttons and checkboxes, are indispensable in web design, but until the recently, they have not been easy to style.

Styling them have become possible with the introduction of CSS3 and the :checked pseudo-class selector.

Let’s Do this

We will be using the :checked pseudo-class selector and + sibling selector to target the label of the checked (selected) input element.

This method is exactly the same for styling both radio buttons and checkboxes… So, let’s do this.

The HTML

We will use the following basic HTML:

The label needs to be connected to the input using the for=" " and id=" ". For ease of styling, we will wrap the label and 'radio button group'within span tags.

Final mark up for our radio button group looks like below:

The CSS

Let’s get styling…. To begin, we will:

1. Hide the checkbox element:

2. Then we style the span tag within the label as required:

  • display inline
  • set dimensions and placement (height, width, paddings, margins)
  • tweak positioning (vertical alignment)
  • style the cursor

It’s basically plain CSS/SCSS, so feel free to customise as desired

3. Finally, we style the :before pseudo-class selector of the ‘checked’ input item to add visual indicators.

The Result

Styled Radio buttons and Checkboxes, achieved with CSS Only (no images), using the :checked pseudo-class selector and + sibling  – cool huh?

Basically…

Radio buttons and Checkboxes, are indispensable in web design, but until recently, have been very difficult to style. The CSS3 method described above, which is applicable to both Radio buttons and Checkboxes allows us to style them by using the :checked pseudo selector and + sibling selector.

Hopefully this will come in handy for your next project.

HTML + CSS only Accordion Element (Radio Button)

In this tutorial, we create a HTML and CSS only accordion, using the radio button method.

 

princebazawule.com_css+html-only-accordion-radio-button-method

View Demo

Background

Accordions are graphical control elements, which comprise a vertically (or horizonally) stacked list of items, such as labels, headings or thumbnails. Each item can be “expanded” or “stretched” to reveal the content associated with that item.

They are common today on websites and, not only add a cool factor, but also allows us to get a lot of content into small spaces.

This was previously only achieved using Javascript or jQuery, but with advancements (CSS3), it is now possible using only CSS.

 

Let’s Do this

We will be using a hidden radio button group, the :checked pseudo-class and appropriate HTML and CSS to create the accordion.

The logic: When the user selects an accordion tab (heading), they basically check the radio button that belongs to that tab. When they click on the next tab in the accordion, they select the next radio button, etc. With CSS rules we then control opening and closing of the tab to show and hide its content area.

Using the radio button method ensures only one section is opened at a time.

 

The HTML

The HTML is simply an unordered list. Each list item represents a single tab and contains a radio input, a pair of empty <i> tags as placeholder to add visual indicators, a H2 title tag as the heading and the tab content.

 

The CSS

Standard SCSS is used here and a few variables as well as responsive styles are defined. The radio button is hidden using opacity: 0; rule, the H2 holds the title of each tab, and the <i> tag is absolutely positioned and styled to add the visual (up/down arrow) indicators to each tab.

Combining the radio input’s :checked pseudo selector with the element ~ element general sibling selector, the tab content’s z-index, height and other properties are manipulated to open and close each accordion tab, hence displaying and hiding content.

 

The Result

A responsive HTML + CSS only Accordion Element, using the Radio Button method.

 

Basically…

Accordions are useful when you want to toggle between hiding and showing large amount of content within a small space. The method described above allow us to achieve this using HTML + CSS only with the radio button method.

Hopefully this will come in handy for your next project.