HTML Radio Button and CSS radio Button Design

HTML Radio Button

A radio button is an element of the Graphical User Interface(GUI) which allow a user to select a
single item from multiple items..
Today we will learn how to create Radio button in html and design using css..
first we will learn how to create radio button..
HTML Radio Button:

HTML Radio Button and CSS radio Button Design

A Radio button define with <input type="radio"> Just Look the below Example..
Radio Button Example:

<html>
<head>
<title>HTML Radio Button</title>
</head>
       <span>Gender : </span>
    <input type="radio" name="sex" value="female">Female
    <input type="radio" name="sex" value="male"> Male
    <input type="radio" name="sex" value="other">Other  
</html>

Radio Button Example With HTML Form:

HTML Radio Button

<html>
<head>
<title>Radio button with Form Example</title>
</head>
<form method="post" action="">
  <table>
     <tr>
    <td>Name:</td>
    <td><input type="text" name="name" placeholder="Your Name"/></td>
  </tr>
  <tr>
    <td>Email</td>
    <td><input type="text" name="email" placeholder="Ex: abcd@gmail.com"></td>
  </tr>
  <tr>
    <td>Gender</td>
    <td>
    <input type="radio" name="sex" value="female">Female
    <input type="radio" name="sex" value="male"> Male
    <input type="radio" name="sex" value="other">Other
    </td>
  </tr>
  <tr>
    <td></td>
    <td><input type="submit" name="submit" value="Submit"/></td>
  </tr>
  </table>
</form>
</html>

HTML Radio button design using CSS:
Radio Button CSS Example 1:

HTML Radio Button

<html>
<head>
<title>HTML Radio Button</title>
<style>
  input[type=radio]{
    width:20px;
 height:20px;
  }
  #radio{
   font-size:18px;
 font-weight:bold;
  }
</style>
</head>
<div id="radio">
       <span>Gender : </span>
    <input type="radio" name="sex" value="female">Female
    <input type="radio" name="sex" value="male"> Male
    <input type="radio" name="sex" value="other">Other
</div>
         
</html>

HTML Radio Button Example 2:

In this last example we are going to create a nice html css button...

  <style>
  span{
  font-weight:bold;
  font-size:17px;
  color:green;
  }
  input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
  cursor:pointer;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
  cursor:progress;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

  </style>
  
  <tr>
    <td><span>Gender : </span></td>
    <td><input type="radio" name="sex" value="female"/>Female
    <input type="radio" name="sex" value="male"/> Male
    <input type="radio" name="sex" value="other"/>Other  
    </td>
 </tr>

That's It Friends How to create HTML Radio Button and Design Radio button using CSS..
If You Like this post please share with our friends ..Thank You..

Latest

Sunday, February 25, 2018

HTML Radio Button and CSS radio Button Design