Skip to content

Instantly share code, notes, and snippets.

@jonnybest

jonnybest/fake-checkbox-style.css

Last active December 16, 2015 01:19
Show Gist options
  • Save jonnybest/5354576 to your computer and use it in GitHub Desktop.
Save jonnybest/5354576 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Jonny Best revised this gist Apr 10, 2013. 1 changed file with 51 additions and 0 deletions.
    51 changes: 51 additions & 0 deletions fake-checkbox-style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -108,4 +108,55 @@ text-shadow: rgb(255, 255, 255) 0px 1px 0px;
    white-space: normal;
    width: auto;
    z-index: 1;
    }

    .checkbox-button-checkbox {
    -webkit-appearance: checkbox;
    -webkit-border-image: none;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    -webkit-writing-mode: horizontal-tb;
    background-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgb(0, 0, 0);
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: rgb(0, 0, 0);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(0, 0, 0);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(0, 0, 0);
    border-top-style: none;
    border-top-width: 0px;
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    cursor: auto;
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    height: 10px;
    left: 20px;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: -5px;
    outline-color: rgb(0, 0, 0);
    outline-style: none;
    outline-width: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: absolute;
    text-align: start;
    text-indent: 0px;
    text-shadow: none;
    text-transform: none;
    top: 50%;
    width: 10px;
    word-spacing: 0px;
    writing-mode: lr-tb;
    z-index: 1;
    }
  2. Jonny Best created this gist Apr 10, 2013.
    111 changes: 111 additions & 0 deletions fake-checkbox-style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,111 @@
    .checkbox-button {

    border-bottom-color: rgba(255, 255, 255, 0.298039);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-left-color: rgba(255, 255, 255, 0.298039);
    border-right-color: rgba(255, 255, 255, 0.298039);
    border-top-color: rgba(255, 255, 255, 0.298039);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-top-style: solid;
    border-top-width: 1px;
    color: rgb(34, 34, 34);
    cursor: pointer;
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 20px;
    min-width: 12px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 9.59375px;
    padding-left: 45px;
    padding-right: 20px;
    padding-top: 9.59375px;
    position: relative;
    text-align: left;
    text-overflow: ellipsis;
    text-shadow: rgb(255, 255, 255) 0px 1px 0px;
    white-space: normal;
    width: 1097.8125px;
    zoom: 1;
    }

    .checkbox-button-icon-off {
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    background-color: rgb(69, 150, 206);
    background-image: url(http://view.jquerymobile.com/1.3.0/css/themes/default/images/icons-18-white.png);
    background-position: -647px -1px;
    background-repeat: no-repeat;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    color: rgb(34, 34, 34);
    cursor: pointer;
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 18px;
    left: 15px;
    margin-top: -9px;
    position: absolute;
    text-align: left;
    text-shadow: rgb(255, 255, 255) 0px 1px 0px;
    top: 50%;
    white-space: normal;
    width: 18px;
    }

    .checkbox-button-icon-off {
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    background-color: rgba(0, 0, 0, 0);
    background-image: url(http://view.jquerymobile.com/1.3.0/css/themes/default/images/icons-18-white.png);
    background-position: -683px -1px;
    background-repeat: no-repeat;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    color: rgb(34, 34, 34);
    cursor: pointer;
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 18px;
    left: 15px;
    margin-top: -9px;
    position: absolute;
    text-align: left;
    text-shadow: rgb(255, 255, 255) 0px 1px 0px;
    top: 50%;
    white-space: normal;
    width: 18px;
    }

    .checkbox-button-label {
    -webkit-user-select: none;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    color: rgb(34, 34, 34);
    cursor: pointer;
    display: inline;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: auto;
    position: relative;
    text-align: left;
    text-shadow: rgb(255, 255, 255) 0px 1px 0px;
    white-space: normal;
    width: auto;
    z-index: 1;
    }