Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how to use css to achieve a rate score related knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

Sort it out as follows:

Find a good-looking iconfont, [Iconfont- Alibaba vector icon library],

Borrow 5 radio checkboxes to remove the default styles and display the default stars

Use the checked pseudo-class to monitor the user's selection, and change the default star to a highlighted star.

Then cooperate-- the sibling operator highlights all the currently selected sibling elements together

Arrange the five radio checkboxes in reverse

Code

This is my business, sir. All right, iconfont.

A very simple layout:

First show the default stars:

/ / remove the default style

Input {

-webkit-appearance: none

Border: none

Outline: none

Cursor: pointer

}

. rate-content {

$main: # ffa822; / / highlight color

$basic: # 999; / / default color

/ / single star

Input [name= "rate"] {

Font-family: "iconfont"; / / iconfont fonts introduced earlier

Font-size: 30px

Padding-right: 10px

/ / the stars displayed by default

&:: after {

Content: "\ e645"

Color: $basic

Transition: color .4s ease; / / add a little color transition effect

}

}

}

Achieve the selection of a single star:

Input [name= "rate"] {

/ / highlight the stars

&: checked {

&:: after {

Content: "\ e73c"

Color: $main

}

}

}

The implementation highlights along with the sibling elements:

Input [name= "rate"] {

/ / highlight the stars

&: checked

&: checked-input [name= "rate"] {

...

}

}

The effect is as follows:

Then arrange the input in reverse:

. rate-content {

Display: flex

Flex-flow: row-reverse

}

Move the mouse in to preview the selected effect:

Luo version:

Input [name= "rate"] {

/ / highlight the stars

&: checked

&: checked-input [name= "rate"]

&: hover

&: hover-input [name= "rate"] {

...

}

}

Optimized version:

Input [name= "rate"] {

/ / highlight the stars

&: checked

&: hover {

&:: after {

Content: "\ e73c"

Color: $main

}

/ / Brotherhood elements highlight together

&-input [name= "rate"] {

&:: after {

Content: "\ e73c"

Color: $main

}

}

}

}

Add magnified animation

Input [name= "rate"] {

Transition: transform .2s ease; / / add transition effect

/ / highlight the stars

&: checked

&: hover {

...

}

/ / move the mouse in to enlarge the stars

&: hover {

Transform: scale (1.2)

}

}

Summary

The core code is actually these two paragraphs, and the others are optional.

Elements are arranged in reverse:

Display: flex

Flex-flow: row-reverse

Sibling element operation:

Input:checked-input

If you do not use flex reverse arrangement, you can also use rotateZ:

. rate-content {

Display: flex

/ / flex-flow: row-reverse

Transform: rotateZ (180deg)

}

After the z axis rotates the 180deg, it is found that the head and tail of the star are reversed, so the child element can also rotate the 180deg:

. rate-content {

Input [name= "rate"] {

Transform: rotateZ (180deg)

}

}

Details to pay attention to

Input [name= "rate"] {

/ / padding-right: 10px

Margin-right: 10px

}

These are all the contents of the article "how to achieve a rate score with css". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.