Рейтинг в виде звезд на CSS

Опубликовано: Суббота, Сентябрь 14, 2013 Комментарии (18)

Выбор способа реализации

Есть стандартный функционал оценки чего-либо в вэбе, который можно встретить на многих сайтах. Как правило, это технически это делается несколькими способами:

1. Набор input элементов типа radio, каждый из которых соответствует той или иной оценке

2. Много ненужной и несемантичной html-разметки + javascript.

Недавно при верстке одного проекта  мне пришлось столкнуться с подобной задачей. Немного подумав, я выбрала первый вариант по нескольким причинам:

– функционал на основе инпутов уже был реализован в cms, соответственно лучше придерживаться его, чем потом заставлять программиста придумывать “костыли” под твой скрипт;

– я ленивая и порой мне легче поколдовать с CSS, чем по всему интернету искать JavaScript плагин, который бы удовлетворил запросы в данной ситуации;

– когда-то я уже видела реализацию подобного механизма и была уверена, что это возможно.

Рейтинг в виде звезд на CSS

Итак, механизм стилизации radio инпутов с помощью CSS не является новым и не я его придумала, конечно. Но почему-то по запросу “рейтинг на CSS” я не нашла готового решения, который бы меня устроил. Поэтому, я написала своё.

1. Нам нужны изображения (желательно в спрайте)  в виде звезд (солнышек, котят, совят и чего угодно, что вам больше нравится).

2. Определимся с разметкой (разметка ниже полностью написана в примере, тут опишу основную идею): у нас есть обертывающий элемент, в нем чередуются <input type=”radio”/> и <label>. Причем, чередуются задом наперёд (это очень важно, чтобы можно было стилизовать все выбранные звезды при клике а также это нужно для hover-эффекта, см. пример). Инпуты идут сверху, прозрачные, чтобы были видны только звезды-label.

3. При выборе того или иного инпута, меняются стили для всех <label>, идущих ниже по разметке (с помощью css селектора ~). Фактически в форме также, как и обычно выбранный radiobutton становится checked.

Кроссбраузерность: точно работает в Chrome 29, Firefox 23.0.1, Opera 16.0, Safari 5.1.7, IE 8+. Проверялось с помощью Javascript на предмет правильности выбора оценки.

Демо реализации рейтинга на CSS без JavaScript

See the Pen Rating stars (CSS) by Anastasiia Bakai (@positivecrash) on CodePen.

Поделитесь с друзьями:

Читайте также:

Комментируйте:

  • http://iamastudent.ru Student

    Очень счастлив что нашел данную статью. Долго возился чтобы сделать звездочки на css, а использовать javascript добавляло лишних действий в обработке результата. Спасибо вам за сей блог. Пишите что-нибудь новое. ;)

    • Positivecrash

      А я очень счастлива, что вам это оказалось полезным :) Спасибо за мотивацию)))

  • Valkinaz

    Шикарное решение, спасибо)

  • Modfop Modfop

    А что если вместо “opacity: 0” в инпуте использовать “display: none”?

    • http://positivecrash.com/ Настя Бакай

      Лучше использовать opacity:0 по нескольким причинам:

      1. Исходя из определения св-ва display: none

      “Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.” источник: http://htmlbook.ru/css/display

      А нам нужно, чтобы сам инпут был кликабелен и ровнялся по размерам звездочке. И, безусловно, если есть возможность лучше действовать исходя из спецификаций, а то получится как с кастомным селектом, который после одного чудесного обновления перестал работать (http://positivecrash.com/css-select-custom/)

      2. В верстке вообще стОит по минимуму использовать св-во display:none, т.к. оно не приветствуется поисковыми системами.

      • Modfop Modfop

        1) Да, инпута не будет видно и он не будет занимать место. Но он все равно будет кликабельным за счет label-а, то есть радио-кнопка будет отмечаться (я это проверял). И дальше будем оформлять только лейблы без всяких хаков, которыми сталкивались с опасити.

        2) Св-во display:none не приветствуется поисковиками, но я думаю и без этого на разных сайтах встречаются достаточное количество display:none.

        • http://positivecrash.com/ Настя Бакай

          1) А проверяли в каких браузерах? Безусловно, этот способ тоже можно попробовать и он будет работать. Но в таком случае больше вероятность, что в каком-то браузере рано или поздно это сломается (к примеру, захотят мозиловцы или майкрософтовцы не отмечать инпут по клику на лэйбл, ну мало ли)

          2) Понятно, что без этого св-ва совсем не обойтись, но если можно его не использовать, то зачем?

          В любом случае, конечно, этот метод не идеален, можно придумывать и придумывать различные улучшения (тем более он давно делался). Так что спасибо за ваши комментарии и дополнения :)

  • Владимир Смирнов

    здравствуйте! Скажите а при реализации такого рейтинга будет ли отображаться средний рейтинг на странице объекта? допустим если один человек дал оценку 1 звезда, а второй человек – 5, покажет ли среднее значение 3?

    • http://positivecrash.com/ Настя Бакай

      Здравствуйте, Владимир. Дело в том, что это только клиентская реализация. То есть по сути, что эти звезды будут показывать в итоге решаете уже вы при реализации серверной части: будь это выбор конкретного пользователя или среднее значение… То есть если вам нужно показать среднее значение, логика примерно такая: получаете от сервера среднюю оценку, далее на фронтенде ставите checked инпутам, которые стоят ДО этой цифры включительно. Единственное, именно таким способом нельзя сделать половинчатые звезды.

      • Владимир Смирнов

        Понятно, жаль мои знания не помогут мне реализовать среднее значение на серверной части. А подскажите как можно сделать так, чтобы по умолчанию стояла оценка 5 звезд к примеру, ну или 4, то есть псевдо среднюю оценку сделать?

        • http://positivecrash.com/ Настя Бакай

          Ну вообще пользователей так обманывать не стоит, на мой взгляд))) Если вы используете какую-то CMS, то тогда наверняка лучше воспользоваться какими-то готовыми модулями рейтинга (в свое время когда я делала верстку этого рейтинга, я отдавала ее потом на интеграцию backend разработчику).

  • kolesoxxx

    Круто, очень помогло

  • VeselijDrozd .

    автор, ты умница, спасибо большущее. It`s genious. Однажды я стану таким же умным)

  • Алексей Кулагин

    Настя – ты УМНИЦА!!! Спасибо огромное. Я тоже ленивый программер, чем проще – тем лучше.

  • Atsa Kozyrev

    Здравствуйте! Вроде все сделал как в примере, но у меня отделяются значки звезд от радибаттонов и выставляются они в последовательности наоборот https://uploads.disquscdn.com/images/574dca1a29adaaa538bcbda508f541e893fc34513aa622503438fd9fb86c1fb7.png

    • http://positivecrash.com/ Настя Бакай

      Добрый день! Если для вас этот вопрос еще актуален, можете загрузить часть этого кода куда-нибудь на http://codepen.io или http://jsfiddle.net , чтобы можно было посмотреть в чем проблема ?

  • Atsa Kozyrev

    И так же при выборе рейтинга путем нажатия на звезду они не закрашиваются

  • mr. Webic

    Отличное решение! Я бы еще отметил что такая реализация добавляет возможность оставление оценки с клавиатуры по TABу и стрелкам, и по идее очень сильно поможет в прохождении стандарта WCAG 2.0. Единственный “баг” в обратной оценке. То есть кнопка вправо не увеличивает оценку, а уменьшает (хотя кнопка верх работает правильно). Tab index это вроде возможно исправить (ну или на худой конец православный JS поможет).