Create a five-star skill rating column using CSS-CSS Tutorial-php.cn

Create a five-star skill rating column using CSS

WBOY

Release： 2023-08-25 14:17:14

forward

1082 people have browsed it

Create a five-star skill rating column using CSS

The 5-star skill rating bar is an essential element of any portfolio website for displaying ratings and achievements. The rating bar is responsive and works on a variety of devices. Here we use radio buttons to create a rating bar.

algorithm

Create an HTML document containing a header and body parts.
Use CSS to set the background color and center the body content.
Style the rating element using font size, orientation, and display properties.
Hide the radio button and style the label element to display it as a block.
Use CSS to add interactivity to label elements with the :hover, :checked, and ~ selectors.
Create a div element with a rating class in the body part.
Add five wireless input elements with different values and IDs.
Add five label elements that contain the text content of the asterisk and attributes that match the corresponding radio input IDs.

Example

<!DOCTYPE html>
<html>
<head>
  <title>5-Star Skills Rating Bar</title>
  <!-- The following CSS styles the rating bar and allows for customization -->
  <style>
    /* The body is styled to center the rating bar and give it a background color */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #a2f9ff;
    }
    /* The rating class is used to style the rating bar and make it responsive */
.rating {
  font-size: 0; /* Remove any font size */
  direction: rtl; /* Set direction to right-to-left for proper star display */
}

/* Hide the radio input element of the rating bar */
.rating input {
  display: none;
}

/* Style the label elements to display as stars and to allow for interactivity */
.rating label {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  font-size: 24px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  color: #ccc;
  transform: rotateY(180deg); /* Flip the star to display properly */
}

/* Style the label elements when hovered over or checked */
.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
  color: #f90; /* Change the color of the star to yellow when hovered over or checked */
}
</style>
</head>
<body>
  <!-- The rating class is used to create the rating bar using radio input elements and labels -->
  <div class="rating">
    <input type="radio" name="rating" id="rating-1" value="1" />
    <label for="rating-1">★</label>
    <input type="radio" name="rating" id="rating-2" value="2" />
    <label for="rating-2">★</label>
    <input type="radio" name="rating" id="rating-3" value="3" />
    <label for="rating-3">★</label>
    <input type="radio" name="rating" id="rating-4" value="4" />
    <label for="rating-4">★</label>
    <input type="radio" name="rating" id="rating-5" value="5" />
    <label for="rating-5">★</label>
  </div>
</body>
</html>

Copy after login

Instead of using radio buttons, developers can use other input types such as range sliders, checkboxes, or text inputs to allow users to provide more detailed feedback.

For websites that require different rating levels, developers can modify CSS styles and HTML markup to accommodate the different rating options. JavaScript can be used to add more interactive features to the rating bar, such as displaying the current rating or displaying a message after the user submits a rating.

in conclusion

As ratings and feedback columns, they can be used on e-commerce websites, mobile applications, online product reviews, etc. to enhance user experience and satisfaction. We use icons instead of images, which makes it easy to style and resize, unlike images. The rating bar is responsive and works on a variety of devices.

CSS styles allow customizing the appearance of the rating bar to fit any website design.

The above is the detailed content of Create a five-star skill rating column using CSS. For more information, please follow other related articles on the PHP Chinese website!