Personalize Radio Buttons and Checkboxes using CSS

Can the styling of radio buttons and checkboxes be customized using only CSS? Many existing solutions involve using images and javascript, but I'm curious if it can be accomplished solely with CSS.

csscheckboxradio-button

Answer №1

It seems that bootswatch.com has mastered the art of customizing inputs using only CSS. I have simplified their technique in this fiddle: https://jsfiddle.net/mthomas9261/qujbq4gs/

HTML:

<input type="radio" value="a" name="test">
<input type="radio" value="b" name="test">

<input type="checkbox" name="a" value="a">
<input type="checkbox" name="b" value="b">

CSS: 

/*****************************************************
******************      Radio        *****************
******************************************************/

/* Hide Original Radio Button */
input[type="radio"] {
  position: relative;
  margin-top: 6px;
  margin-right: 4px;
  vertical-align: top;
  border: none;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
/* Remove standard blue selection outline */
input[type="radio"]:focus {
  outline: none;
}
/* New radio button */
input[type="radio"]:before,
input[type="radio"]:after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
}
input[type="radio"]:before {
  position: absolute;
  left: 1px;
  top: -2px;
  background-color: red;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
input[type="radio"]:after {
  position: relative;
  top: -3px;
  border: 1px solid #E0E0E0;
}
/* New radio checked */
input[type="radio"]:checked:before {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}
input[type="radio"]:checked:after {
  border-color: #E0E0E0;
}
/* New radio disabled */
input[type="radio"]:disabled:after,
input[type="radio"]:disabled:checked:after {
  border-color: #F1F1F1;
}
input[type="radio"]:disabled:checked:before {
  background-color: #F1F1F1;
}

/*****************************************************
****************      Checkbox        ****************
******************************************************/
/* Hide Original Checkbox  */
input[type="checkbox"] {
  position: relative;
  border: none;
  margin-bottom: -4px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
/* Display New Checkox */
input[type="checkbox"] {
  position: relative;
  border: none;
  margin-bottom: -4px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus,
.checkbox-inline input[type="checkbox"]:focus {
  outline: none;
}
input[type="checkbox"]:focus:after,
.checkbox input[type="checkbox"]:focus:after,
.checkbox-inline input[type="checkbox"]:focus:after {
  border-color: #E0E0E0;
}
input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin-top: -2px;
  margin-right: 5px;
  border: 1px solid #E0E0E0;
  border-radius: 1px;
  -webkit-transition: 240ms;
  -o-transition: 240ms;
  transition: 240ms;
}
/* Checkbox Checked  */
input[type="checkbox"]:checked:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 5px;
  display: table;
  width: 4px;
  height: 9px;
  border: 3px solid red;
  border-top-width: 0;
  border-left-width: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type="checkbox"]:checked:after {
  border-color: #E0E0E0;
}
/* Checkbox Disabled  */
input[type="checkbox"]:disabled:after {
  border-color: #F1F1F1;
}
input[type="checkbox"]:disabled:checked:after {
  background-color: #F1F1F1;
  border-color: transparent;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

So, here's a strange issue I'm facing. On my website, the background image changes with a smooth fadeIn/Out transition. Video: Website in action: Here is the HTML markup: <div class="fondo" onclick="descargar(2,500);descargar(1,500);"> ...

javascriptjquerycssopacity

Enhancing Your Website with Multiple Background Images in CSS3

Having trouble understanding how to position multiple background images with CSS3. I'm struggling to get them to display at the top, middle, and bottom of the page. Can you help me figure out how to make an image appear at different positions using a ...

htmlcss

Adding a luminous glow effect to the <a> tag upon selection

Currently, I am working on integrating a navigation bar into a test site. I have noticed that some navigation bars highlight the current selected page by adding a bar underneath or creating a glowing effect around the <a> tag. I am unsure of the corr ...

css

Upon loading, the Carousel is visible instead of being hidden, which is contrary to its intended behavior

Any help would be greatly appreciated as I am struggling with creating a web page featuring tabs for "London, New York, Shanghai". The initial page displayed is the "welcome" page with the other tabs hidden on load. I successfully implemented a carousel f ...

javascripthtmlcsstailwind-cssdisplay

Is there a way to keep the background image stationary as I scroll?

As someone who is new to html and CSS, I recently tried to enhance my previous project by incorporating a background image that spans the entire screen size and remains fixed while scrolling up or down. Here is the code snippet: ''' body { ...

htmlcss

When resizing the browser, Bootstrap's container class consistently prioritizes the alignment of elements within the first columns on the left side

When resizing the browser, the container class in bootstrap always focuses on the first column on the left class="col-lg-3". Is there a way to make it focus on the middle column col-lg-6 instead? Before resizing: https://i.sstatic.net/X4jAk.png After re ...

csstwitter-bootstrapbootstrap-4

Using @use in Bootstrap version 5 instead of @import for customizing your styles

Looking for a solution to utilize @use instead of @import in order to import all variables from my _custom.scss partial into the styles.scss sass file. However, facing an issue where @use is not overriding the variables as expected. Any suggestions for res ...

csssassbootstrap-5dart-sass

Adjusting font size according to the font style selected

Can conditional font size be determined based on font family using CSS or jQuery? ...

jqueryhtmlcssconditional-statementsfont-size

Setting a fixed width for content in CSS based on the size of the browser screen

I'm a newcomer to CSS and HTML and feeling a bit lost on this issue. My goal is to divide the screen into two halves, with one half taking up 50% of the browser screen width while the other half remains flexible. I want the content in one half to be f ...

htmlcsswidth

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

javascripthtmljquerycss

Tips for changing the text color to stand out from the color of the input field

My input field undergoes color changes depending on whether it's in dark mode or light mode. However, I'm struggling to maintain a distinct color for the input field border and text. The client prefers a very light border for the input field but ...

cssreactjs

Wavy CSS Animation

For assistance with my spinning image, please check out this fiddle: https://jsfiddle.net/dricardo1/9a8p6srb/ Hello! I'm struggling with a spinning image that has a noticeable wobble when rotating. I can't seem to find a solution to make the rot ...

javascripthtmlcsscss-animations

Creating a horizontal line to divide floating list items with CSS

I would like to achieve a design where there is a line between floating items displayed as follows: .......................................... . . . LI LI LI LI LI LI LI LI LI LI LI . . --------------------- ...

csscss-float

Oops! Looks like we have encountered an issue with reading the property 'checked' of nothing

Whenever I click the checkbox, an image should be displayed. Unfortunately, I encountered an error: Uncaught TypeError: Cannot read property 'checked' of null at (index):185 at dispatch (VM576 jquery.min.js:3) at i (VM5 ...

javascriptjqueryhtmlcssangular

Reposition DIV elements using only CSS styling

I'm attempting to switch the positions of two divs for responsive design (the website appearance changes based on browser width, ideal for mobile). Currently, my setup looks like this: <div id="first_div"></div> <div id="second_div"&g ...

cssresponsive-design

What is the best way to exchange configuration data among Javascript, Python, and CSS within my Django application?

How can I efficiently configure Javascript, Django templates, Python code, and CSS that all rely on the same data? For example, let's say I have a browser-side entry widget written in Javascript that interacts with an embedded Java app. Once the user ...

javascriptpythoncssdjangodata-sharing

Retrieve the class name from a CSS stylesheet

How can I extract all the CSS class names from a CSS file? This is what my CSS file looks like: p.juicy{ margin-left:40px; } p.csBody{ text-align:justify; } p.csCode{ font-family:"Lucida Console", Monaco, monospace; background-color:sil ...

c#css.netwinforms

The alignment of my card icons changes depending on the size of the paragraph

Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...

htmlcssreactjsfrontendtailwind-css

Bulma table rows not extending to the complete width

In my angular7 app, I have implemented a is-fullwidth Bulma table that is functioning correctly. However, I now need to incorporate an angular component within each row, with the td tags contained in that component. The issue arises when I do this, as the ...

cssangularbulma

Is it possible to toggle between thumbnails and a larger image in a jQuery gallery?

Hello, I am new to website development and I would like to create a jquery based photo gallery for my personal website. One feature that really catches my eye is this one (for example): The gallery has a large thumbnail grid where you can click on a thumb ...

jquerycssgalleryslideshowthumbnails