Home Web Design CSS CSS Custom Checkbox And Radio Buttons | HTML Stylish Radio Button

CSS Custom Checkbox And Radio Buttons | HTML Stylish Radio Button

May 28, 2019

11413

How we can customize HTML radio buttons or checkboxes? Answer: Check out This CSS Custom Checkbox And Radio Buttons, HTML Stylish Radio Button.

You must have seen radio buttons or checkbox before. If you don’t know what is HTML radio buttons, You must have seen the empty circle field or checkbox on multiple choice question. They called radio in HTML and web languages. Buy those buttons are non-stylish by default.

But you can change the layout or style of the radio buttons and checkboxes. But now the question is how we can change the style of those buttons. Yes, you can do it easily if you seeing this post. Because today I am sharing a solution to this. So, Today I am sharing the CSS Custom Checkbox And Radio Buttons program. In other words, HTML Stylish Radio Buttons.

We can call this a Pure CSS Custom Radio Buttons and Checkbox. You can use this on your website’s feedback form or something else. You can also customize this as your choice, after a few changes of CSS codes. Also, a beginner can understand the whole program after seeing the code. This is a good example of how we can use CSS.

If you are thinking now how this program looks like. Then see the preview given below.

Preview Of HTML Stylish Radio Button

See this video preview to getting an idea of how this program actually is.

https://webdevtrick.com/wp-content/uploads/css-custom-readio-button.mp4?_=1

Now you can see this program visually. If you like this, then get the source code of its.

CSS Custom Checkbox Source Code

Before sharing source code, let’s talk about this program. As you know this is a pure CSS custom checkbox and radio buttons program. For creating this program, I used HTML for attribute (get info). For styling the radio buttons I used CSS [type="radio"] command for giving effect to each radio. This program is a perfect example of the power of CSS3.

For creating this program, you have to create only 2 files. One for HTML, and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Custom Checkbox | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
</head>

<body>

  <fieldset>
  <legend>CSS Stylish Radio Buttons</legend>
  <label for="webdesign">
    <input type="radio" value="design" name="radiob" id="webdesign" checked> <span>Web Design</span>
  </label>

  <label for="webdevelopment">
    <input type="radio" value="webdevelopment" name="radiob" id="webdevelopment"> <span>Web Development</span>
  </label>

  <label for="seo">
    <input type="radio" value="seo"  name="radiob" id="seo"> <span>SEO</span>
  </label>
</fieldset>
 
</body>

</html>

<!DOCTYPE html>

<head>

<title>CSS Custom Checkbox | Webdevtrick.com</title>

</head>

<body>

<legend>CSS Stylish Radio Buttons</legend>

<input type="radio" value="design" name="radiob" id="webdesign" checked> <span>Web Design</span>

</label>

<input type="radio" value="webdevelopment" name="radiob" id="webdevelopment"> <span>Web Development</span>

</label>

</label>

</fieldset>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
@import url(https://fonts.googleapis.com/css?family=Staatliches&display=swap);
body {
  margin: 8em auto;
  max-width: 30em;
  font-family: 'Staatliches', cursive;
}
[type="radio"] {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}
label {
  display: block;
  cursor: pointer;
  line-height: 2.5;
  font-size: 1.5em;
}
[type="radio"] + span {
  display: block;
}
[type="radio"] + span:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.25em;
  border-radius: 1em;
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.15em #000;
  margin-right: 0.75em;
  transition: 0.5s ease all;
}
[type="radio"]:checked + span:before {
  background:  #ea4b3c;
  box-shadow: 0 0 0 0.25em #000;
}
[type="radio"]:focus + span:after {
  content: '\00AB';
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -0.125em;
  color: #ea4b3c;
}
fieldset {
  font-size: 1em;
  border: 2px solid #000;
  padding: 2em;
  border-radius: 0.5em;
}
legend {
  color: #fff;
  background: #000;
  padding: 0.25em 1em;
  border-radius: 1em;
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

@import url(https://fonts.googleapis.com/css?family=Staatliches&display=swap);

body {

margin: 8em auto;

max-width: 30em;

font-family: 'Staatliches', cursive;

}

[type="radio"] {

border: 0;

clip: rect(0 0 0 0);

height: 1px; margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

width: 1px;

}

label {

display: block;

cursor: pointer;

line-height: 2.5;

font-size: 1.5em;

}

[type="radio"] + span {

display: block;

}

[type="radio"] + span:before {

content: '';

display: inline-block;

width: 1em;

height: 1em;

vertical-align: -0.25em;

border-radius: 1em;

border: 0.125em solid #fff;

box-shadow: 0 0 0 0.15em #000;

margin-right: 0.75em;

transition: 0.5s ease all;

}

[type="radio"]:checked + span:before {

background: #ea4b3c;

box-shadow: 0 0 0 0.25em #000;

}

[type="radio"]:focus + span:after {

content: '\00AB';

font-size: 1.5em;

line-height: 1;

vertical-align: -0.125em;

color: #ea4b3c;

}

fieldset {

font-size: 1em;

border: 2px solid #000;

padding: 2em;

border-radius: 0.5em;

}

legend {

color: #fff;

background: #000;

padding: 0.25em 1em;

border-radius: 1em;

}

That’s It. You have successfully created a CSS Custom Checkbox and HTML Stylish Radio Buttons. If you have any doubt or question then comment down below.

Thanks For Visiting, Keep Visiting.