Star rating on CSS with font-awesome font icons
The task was to add a star rating to the form of comments for the template.
It should be the usual 5 stars, when hovering on which all the stars are allocated from the beginning to the one that was pointed and when selected (clicked), this state is preserved. Also, of course, you need to ensure the transfer of the value of the specified rating when submitting the form.
The decision was made not for the final project, but for the template. Therefore, it was necessary to make the stars as flexible as possible for further customization. That is, changes in color, size of stars should be as easy as possible. Under this configuration, the use of image sprites did not fit, so I decided to use font icons. The choice fell on the service Font Awesome . There is an asterisk called fa-star-o — the default asterisk and fa-star — the asterisk active (when hovering and selecting).
Then I decided to think about how to implement such a task with minimal resources, ideally without using javascript. In the end, everything turned out and, as for me, such a solution is optimal for such a task.
')
If you are too lazy to read further, you can immediately see the result here - the codepen .
The general idea is that we display the rating with the usual radio buttons to save the transfer of data through the form. Next, we hide the radio buttons with CSS, and we will select them with a click on the neighboring labels that refer to the radio button with the for attribute. We display the labels themselves as icons from the Font Awesome service.
As a result, the HTML markup is as follows:
Of course, do not forget to connect the font Font Awesome at the beginning.
It is very important to preserve the order of the input and label elements, and not to put any nested elements inside. This dependence on the html markup is negative, but this is the victim that I thought was appropriate.
It is also very important to display radio buttons in the reverse order from 5 to 1.
The first thing to do is to hide the radio buttons. As a result, we are left with only asterisks when clicking on which selects the desired radio box.
Secondly, when you hover, the icon should change to the active one, and not only the current icon, but all the icons in front of it should change!
content: "\ f005"; - This is the code for the active star-rating icon in the Font Awesome font. Icons in this font are inserted through the pseudo-element :: before
Third - when clicking on the icon, the state of guidance should be preserved, that is, the current and neighboring stars should be active.
Add another selector to the same rule:
As a result, the main styles that do the main work are the following:
Next you need to turn the stars in the other direction, as the sister selector selects neighbors in the direction of the text. By default, from left to right, but we need the opposite.
To solve this problem, there are two ways: change the text directions for the star-rating element by specifying the direction: rtl or make the element float on the right side. I prefer the second option. In addition, by making the elements inside the .star-rating floating, we will remove the indents between the asterisks because of which the guidance disappears.
In general, then everything is usually normal. Once again the link to the codepen result.
As a result, we have a full-fledged old-rating with font icons, written only in HTML + SS, in which it is easy to change the size and color of stars.
It should be the usual 5 stars, when hovering on which all the stars are allocated from the beginning to the one that was pointed and when selected (clicked), this state is preserved. Also, of course, you need to ensure the transfer of the value of the specified rating when submitting the form.
The decision was made not for the final project, but for the template. Therefore, it was necessary to make the stars as flexible as possible for further customization. That is, changes in color, size of stars should be as easy as possible. Under this configuration, the use of image sprites did not fit, so I decided to use font icons. The choice fell on the service Font Awesome . There is an asterisk called fa-star-o — the default asterisk and fa-star — the asterisk active (when hovering and selecting).
Then I decided to think about how to implement such a task with minimal resources, ideally without using javascript. In the end, everything turned out and, as for me, such a solution is optimal for such a task.
')
If you are too lazy to read further, you can immediately see the result here - the codepen .
HTML markup
The general idea is that we display the rating with the usual radio buttons to save the transfer of data through the form. Next, we hide the radio buttons with CSS, and we will select them with a click on the neighboring labels that refer to the radio button with the for attribute. We display the labels themselves as icons from the Font Awesome service.
As a result, the HTML markup is as follows:
<div class="star-rating"> <div class="star-rating__wrap"> <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label> <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label> <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label> <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label> <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label> </div> </div> Of course, do not forget to connect the font Font Awesome at the beginning.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> It is very important to preserve the order of the input and label elements, and not to put any nested elements inside. This dependence on the html markup is negative, but this is the victim that I thought was appropriate.
It is also very important to display radio buttons in the reverse order from 5 to 1.
CSS styles
The first thing to do is to hide the radio buttons. As a result, we are left with only asterisks when clicking on which selects the desired radio box.
.star-rating__input{ display: none; } Secondly, when you hover, the icon should change to the active one, and not only the current icon, but all the icons in front of it should change!
.star-rating__ico:hover:before, .star-rating__ico:hover ~ .b-star-rating__ico:before, { content: "\f005"; } content: "\ f005"; - This is the code for the active star-rating icon in the Font Awesome font. Icons in this font are inserted through the pseudo-element :: before
Third - when clicking on the icon, the state of guidance should be preserved, that is, the current and neighboring stars should be active.
Add another selector to the same rule:
.star-rating__input:checked ~ .star-rating__ico:before As a result, the main styles that do the main work are the following:
.star-rating__input{ display: none; } .star-rating__ico:hover:before, .star-rating__ico:hover ~ .star-rating__ico:before, .star-rating__input:checked ~ .star-rating__ico:before { content: "\f005"; } Next you need to turn the stars in the other direction, as the sister selector selects neighbors in the direction of the text. By default, from left to right, but we need the opposite.
To solve this problem, there are two ways: change the text directions for the star-rating element by specifying the direction: rtl or make the element float on the right side. I prefer the second option. In addition, by making the elements inside the .star-rating floating, we will remove the indents between the asterisks because of which the guidance disappears.
In general, then everything is usually normal. Once again the link to the codepen result.
As a result, we have a full-fledged old-rating with font icons, written only in HTML + SS, in which it is easy to change the size and color of stars.
Source: https://habr.com/ru/post/262833/
All Articles