Skip to content

Instantly share code, notes, and snippets.

@adityasaxena

adityasaxena/index.html

Last active August 29, 2015 14:21
Show Gist options
  • Save adityasaxena/654e00673f5ea5a40d3e to your computer and use it in GitHub Desktop.
Save adityasaxena/654e00673f5ea5a40d3e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adityasaxena revised this gist May 16, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <html>
    <head>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="style.css" type="text/css" />
    <link href="style.css" type="text/css" rel="stylesheet" />
    <meta charset="utf-8">
    <title>Custom Radio Buttons and Checkboxes</title>
    </head>
  2. adityasaxena revised this gist May 16, 2015. 2 changed files with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    <html>
    <head>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href=""
    <link href="style.css" type="text/css" />
    <meta charset="utf-8">
    <title>Custom Radio Buttons and Checkboxes</title>
    </head>
    0 jsbin.rekiqeqeqi.css → style.css
    View file
    File renamed without changes.
  3. adityasaxena revised this gist May 16, 2015. 1 changed file with 1 addition and 233 deletions.
    234 changes: 1 addition & 233 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,99 +2,9 @@
    <html>
    <head>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href=""
    <meta charset="utf-8">
    <title>Custom Radio Buttons and Checkboxes</title>
    <style id="jsbin-css">
    body {
    background-color: #eee;
    }

    /** CHECKBOX CSS **/

    input[type="checkbox"] {
    display: none;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button {
    margin-right: 11px;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button:before {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: rgba(255, 255, 255, .8);
    content: '';
    position: absolute;
    border-radius: 2px;
    left: 2px;
    top: 3px;
    }

    input[type="checkbox"] + .custom-checkbox-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f096';
    font-size: 20px;
    cursor: pointer;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button {
    margin-right: 10px;
    display: inline-block;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:before {
    display: none;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:after {
    content: '\f14a'; /* This comes from Font Awesome */
    color: #1569ad;
    }

    /** RADIO BUTTON CSS **/
    input[type="radio"] {
    display: none;
    position: relative;
    }

    input[type="radio"][disabled] + .custom-radio-button:after {
    cursor: not-allowed;
    }

    input[type="radio"][disabled]:checked + .custom-radio-button:after {
    content: '\f111';
    color: #cfdaed;
    }

    input[type="radio"]:checked + .custom-radio-button:after {
    content: '\f058';
    color: #1569ad;
    }

    input[type="radio"] + .custom-radio-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f10c';
    font-size: 18px;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <h2>Custom Radio Buttons and Checkboxes</h2>
    @@ -137,147 +47,5 @@ <h4>Custom Checkboxes</h4>
    </span>
    <span>Sweet Check 2</span>
    </label>

    <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
    <html>
    <head>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <meta charset="utf-8">
    <title>Custom Radio Buttons and Checkboxes</title>
    </head>
    <body>
    <h2>Custom Radio Buttons and Checkboxes</h2>
    <p>You can either use:
    <br/>
    1. Font Icons like Font-Awesome or Glyphicons, or
    <br/>
    2. Custom Images that suit your Radio Buttons or Checkboxes, or
    3. you could also use Unicode characters that are present in HTML</p>
    <p>In the following example, I have used <strong>Font Awesome</strong>.</p>
    <h4>Custom Radio Buttons</h4>
    <label>
    <input type="radio" name="sweet-radio" id="sweet-radio-1" value="Yes" checked>
    <span class="custom-radio-button">
    </span>
    <span>Sweet Radio 1</span>
    </label>
    <label>
    <input type="radio" name="sweet-radio" id="sweet-radio-2" value="No">
    <span class="custom-radio-button">
    </span>
    <span>Sweet Radio 2</span>
    </label>
    <label>
    <input type="radio" name="sweet-radio-3" id="sweet-radio-3" value="No" disabled checked>
    <span class="custom-radio-button">
    </span>
    <span>Sweet Radio 3</span>
    </label>
    <h4>Custom Checkboxes</h4>
    <label>
    <input type="checkbox" id="sweet-check-1"/>
    <span class="custom-checkbox-button">
    </span>
    <span>Sweet Check 1</span>
    </label>
    <label>
    <input type="checkbox" id="sweet-check-2" checked/>
    <span class="custom-checkbox-button">
    </span>
    <span>Sweet Check 2</span>
    </label>
    </body>
    </html></script>

    <script id="jsbin-source-css" type="text/css">body {
    background-color: #eee;
    }

    /** CHECKBOX CSS **/

    input[type="checkbox"] {
    display: none;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button {
    margin-right: 11px;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button:before {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: rgba(255, 255, 255, .8);
    content: '';
    position: absolute;
    border-radius: 2px;
    left: 2px;
    top: 3px;
    }

    input[type="checkbox"] + .custom-checkbox-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f096';
    font-size: 20px;
    cursor: pointer;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button {
    margin-right: 10px;
    display: inline-block;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:before {
    display: none;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:after {
    content: '\f14a'; /* This comes from Font Awesome */
    color: #1569ad;
    }

    /** RADIO BUTTON CSS **/
    input[type="radio"] {
    display: none;
    position: relative;
    }

    input[type="radio"][disabled] + .custom-radio-button:after {
    cursor: not-allowed;
    }

    input[type="radio"][disabled]:checked + .custom-radio-button:after {
    content: '\f111';
    color: #cfdaed;
    }

    input[type="radio"]:checked + .custom-radio-button:after {
    content: '\f058';
    color: #1569ad;
    }

    input[type="radio"] + .custom-radio-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f10c';
    font-size: 18px;
    cursor: pointer;
    }
    </script>
    </body>
    </html>
  4. adityasaxena created this gist May 16, 2015.
    283 changes: 283 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,283 @@
    <!DOCTYPE html>
    <html>
    <head>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <meta charset="utf-8">
    <title>Custom Radio Buttons and Checkboxes</title>
    <style id="jsbin-css">
    body {
    background-color: #eee;
    }

    /** CHECKBOX CSS **/

    input[type="checkbox"] {
    display: none;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button {
    margin-right: 11px;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button:before {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: rgba(255, 255, 255, .8);
    content: '';
    position: absolute;
    border-radius: 2px;
    left: 2px;
    top: 3px;
    }

    input[type="checkbox"] + .custom-checkbox-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f096';
    font-size: 20px;
    cursor: pointer;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button {
    margin-right: 10px;
    display: inline-block;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:before {
    display: none;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:after {
    content: '\f14a'; /* This comes from Font Awesome */
    color: #1569ad;
    }

    /** RADIO BUTTON CSS **/
    input[type="radio"] {
    display: none;
    position: relative;
    }

    input[type="radio"][disabled] + .custom-radio-button:after {
    cursor: not-allowed;
    }

    input[type="radio"][disabled]:checked + .custom-radio-button:after {
    content: '\f111';
    color: #cfdaed;
    }

    input[type="radio"]:checked + .custom-radio-button:after {
    content: '\f058';
    color: #1569ad;
    }

    input[type="radio"] + .custom-radio-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f10c';
    font-size: 18px;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <h2>Custom Radio Buttons and Checkboxes</h2>
    <p>You can either use:
    <br/>
    1. Font Icons like Font-Awesome or Glyphicons, or
    <br/>
    2. Custom Images that suit your Radio Buttons or Checkboxes, or
    3. you could also use Unicode characters that are present in HTML</p>
    <p>In the following example, I have used <strong>Font Awesome</strong>.</p>
    <h4>Custom Radio Buttons</h4>
    <label>
    <input type="radio" name="sweet-radio" id="sweet-radio-1" value="Yes" checked>
    <span class="custom-radio-button">
    </span>
    <span>Sweet Radio 1</span>
    </label>
    <label>
    <input type="radio" name="sweet-radio" id="sweet-radio-2" value="No">
    <span class="custom-radio-button">
    </span>
    <span>Sweet Radio 2</span>
    </label>
    <label>
    <input type="radio" name="sweet-radio-3" id="sweet-radio-3" value="No" disabled checked>
    <span class="custom-radio-button">
    </span>
    <span>Sweet Radio 3</span>
    </label>
    <h4>Custom Checkboxes</h4>
    <label>
    <input type="checkbox" id="sweet-check-1"/>
    <span class="custom-checkbox-button">
    </span>
    <span>Sweet Check 1</span>
    </label>
    <label>
    <input type="checkbox" id="sweet-check-2" checked/>
    <span class="custom-checkbox-button">
    </span>
    <span>Sweet Check 2</span>
    </label>

    <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
    <html>
    <head>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <meta charset="utf-8">
    <title>Custom Radio Buttons and Checkboxes</title>
    </head>
    <body>
    <h2>Custom Radio Buttons and Checkboxes</h2>
    <p>You can either use:
    <br/>
    1. Font Icons like Font-Awesome or Glyphicons, or
    <br/>
    2. Custom Images that suit your Radio Buttons or Checkboxes, or
    3. you could also use Unicode characters that are present in HTML</p>
    <p>In the following example, I have used <strong>Font Awesome</strong>.</p>
    <h4>Custom Radio Buttons</h4>
    <label>
    <input type="radio" name="sweet-radio" id="sweet-radio-1" value="Yes" checked>
    <span class="custom-radio-button">
    </span>
    <span>Sweet Radio 1</span>
    </label>
    <label>
    <input type="radio" name="sweet-radio" id="sweet-radio-2" value="No">
    <span class="custom-radio-button">
    </span>
    <span>Sweet Radio 2</span>
    </label>
    <label>
    <input type="radio" name="sweet-radio-3" id="sweet-radio-3" value="No" disabled checked>
    <span class="custom-radio-button">
    </span>
    <span>Sweet Radio 3</span>
    </label>
    <h4>Custom Checkboxes</h4>
    <label>
    <input type="checkbox" id="sweet-check-1"/>
    <span class="custom-checkbox-button">
    </span>
    <span>Sweet Check 1</span>
    </label>
    <label>
    <input type="checkbox" id="sweet-check-2" checked/>
    <span class="custom-checkbox-button">
    </span>
    <span>Sweet Check 2</span>
    </label>
    </body>
    </html></script>

    <script id="jsbin-source-css" type="text/css">body {
    background-color: #eee;
    }

    /** CHECKBOX CSS **/

    input[type="checkbox"] {
    display: none;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button {
    margin-right: 11px;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button:before {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: rgba(255, 255, 255, .8);
    content: '';
    position: absolute;
    border-radius: 2px;
    left: 2px;
    top: 3px;
    }

    input[type="checkbox"] + .custom-checkbox-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f096';
    font-size: 20px;
    cursor: pointer;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button {
    margin-right: 10px;
    display: inline-block;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:before {
    display: none;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:after {
    content: '\f14a'; /* This comes from Font Awesome */
    color: #1569ad;
    }

    /** RADIO BUTTON CSS **/
    input[type="radio"] {
    display: none;
    position: relative;
    }

    input[type="radio"][disabled] + .custom-radio-button:after {
    cursor: not-allowed;
    }

    input[type="radio"][disabled]:checked + .custom-radio-button:after {
    content: '\f111';
    color: #cfdaed;
    }

    input[type="radio"]:checked + .custom-radio-button:after {
    content: '\f058';
    color: #1569ad;
    }

    input[type="radio"] + .custom-radio-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f10c';
    font-size: 18px;
    cursor: pointer;
    }
    </script>
    </body>
    </html>
    89 changes: 89 additions & 0 deletions jsbin.rekiqeqeqi.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,89 @@
    body {
    background-color: #eee;
    }

    /** CHECKBOX CSS **/

    input[type="checkbox"] {
    display: none;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button {
    margin-right: 11px;
    position: relative;
    }

    input[type="checkbox"] + .custom-checkbox-button:before {
    width: 12px;
    height: 12px;
    display: inline-block;
    background: rgba(255, 255, 255, .8);
    content: '';
    position: absolute;
    border-radius: 2px;
    left: 2px;
    top: 3px;
    }

    input[type="checkbox"] + .custom-checkbox-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f096';
    font-size: 20px;
    cursor: pointer;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button {
    margin-right: 10px;
    display: inline-block;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:before {
    display: none;
    }

    input[type="checkbox"]:checked + .custom-checkbox-button:after {
    content: '\f14a'; /* This comes from Font Awesome */
    color: #1569ad;
    }

    /** RADIO BUTTON CSS **/
    input[type="radio"] {
    display: none;
    position: relative;
    }

    input[type="radio"][disabled] + .custom-radio-button:after {
    cursor: not-allowed;
    }

    input[type="radio"][disabled]:checked + .custom-radio-button:after {
    content: '\f111';
    color: #cfdaed;
    }

    input[type="radio"]:checked + .custom-radio-button:after {
    content: '\f058';
    color: #1569ad;
    }

    input[type="radio"] + .custom-radio-button:after {
    color: #cfdaed;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\f10c';
    font-size: 18px;
    cursor: pointer;
    }