Skip to content

Instantly share code, notes, and snippets.

@dchowitz

dchowitz/!css-only-rating-input.md

Last active July 2, 2017 06:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dchowitz/5105bf8694b1f4c3732af059ad97324e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dchowitz/5105bf8694b1f4c3732af059ad97324e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dchowitz renamed this gist Jul 2, 2017. 1 changed file with 0 additions and 0 deletions.
    0 rating-input-elaboration.markdown → !css-only-rating-input.md
    View file
    File renamed without changes.
  2. dchowitz revised this gist Jul 2, 2017. 3 changed files with 3 additions and 9 deletions.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <div class="rating" data="foo">
    <div class="rating">
    <input type="radio" id="rating1" name="rating"/>
    <label for="rating1">star1</label>
    <input type="radio" id="rating2" name="rating"/>
    2 changes: 1 addition & 1 deletion rating-input-elaboration.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    Rating Input Elaboration
    ------------------------
    Fiddling around with getting a rating input consisting of five checkboxes rendered as stars to work.
    Fiddling around with getting a rating input consisting of checkboxes rendered as stars to work with CSS only.

    A [Pen](https://codepen.io/dchowitz/pen/yXKabo) by [Denny Christochowitz](http://codepen.io/dchowitz) on [CodePen](http://codepen.io/).

    8 changes: 1 addition & 7 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -11,19 +11,13 @@ $new: gold;
    .rating > input {
    display: none;
    }
    /*
    .rating > label {
    overflow: hidden;
    width: 1em;
    white-space: nowrap;
    }*/

    .rating > label {
    font-size: 0;
    }

    .rating > label:before {
    font-size: 2rem; // doesn't work with em
    font-size: 2rem; // wouldn't work with em, since em is always relative to the parent
    content: '★';
    }

  3. dchowitz created this gist Jul 2, 2017.
    10 changes: 10 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <div class="rating" data="foo">
    <input type="radio" id="rating1" name="rating"/>
    <label for="rating1">star1</label>
    <input type="radio" id="rating2" name="rating"/>
    <label for="rating2">star2</label>
    <input type="radio" id="rating3" name="rating"/>
    <label for="rating3">star3</label>
    <input type="radio" id="rating4" name="rating"/>
    <label for="rating4">star4</label>
    </div>
    7 changes: 7 additions & 0 deletions rating-input-elaboration.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Rating Input Elaboration
    ------------------------
    Fiddling around with getting a rating input consisting of five checkboxes rendered as stars to work.

    A [Pen](https://codepen.io/dchowitz/pen/yXKabo) by [Denny Christochowitz](http://codepen.io/dchowitz) on [CodePen](http://codepen.io/).

    [License](https://codepen.io/dchowitz/pen/yXKabo/license).
    43 changes: 43 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    $active: orange;
    $new: gold;

    .rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    color: grey;
    }

    .rating > input {
    display: none;
    }
    /*
    .rating > label {
    overflow: hidden;
    width: 1em;
    white-space: nowrap;
    }*/

    .rating > label {
    font-size: 0;
    }

    .rating > label:before {
    font-size: 2rem; // doesn't work with em
    content: '★';
    }

    input:checked ~ label {
    color: $active;
    }

    .rating:hover > label {
    color: grey;
    }

    .rating:hover > label:hover,
    .rating:hover > label:hover ~ label
    {
    color: $new;
    }