The "safe" star rating & the ONE star unlimited rating

After my scalable star rating and my ONE star rating, Here I am with more rating systems.

This time I will perform a 2x combo providing not one, but two star rating systems:

1. The "safe" star rating

2. The ONE star unlimited rating

The "safe" star rating

Everyone is talking about accessibility but no one is talking about safety which is a very important subject. Nowadays, everyone is using touch screens to navigate and as you know stars have spikes and they are dangerous for your fingers!

Each years 20% of the kids between 8 years and 14 years get hurt by star spikes while navigating their phones. A recent study has claimed that 89% of the star rating on the web aren't safe!

Luckily, I am here for the rescue providing a "safe" star rating. No more dangerous spikes but smooth and rounded edges instead.

Similar to my first rating system, it's scalable and is made with pure CSS (no JS and no SVG).

Keep people safe by adopting this rating system.

The ONE star unlimited rating

The first version of the ONE star rating was good but it has few drawbacks:

• Only limited to a 0-5 rating
• Not very intuitive

I have improved it and this version is now called the: ONE star unlimited rating.

Unlimited because it can work with any rating. Only one star holding all kind of rating.

Let's start with the classical 0-5 rating:

A simple click on the star will increase the rating. More intuitive and also informative since I am showing the rating.

You can search in the code but you will find no JS logic in there. All is done with CSS.

Want more rating? We simply add more inputs and we adjust the scaling step:

By simply adjusting 2 variables we can control both the size and the rating range while still having a unique star.

The first version can also be updated to include the rating:

What about <label>?

Someone said my code is missing labels. Guess what, you can easily add them without affecting the code.

I simply updated 2 rules where I am using the + selector (replacing + with + * + to consider the label), nothing more. The same can be done with all my star rating and you don't have to touch the code of the others because I am not using the + selector. test it and see.

Now you have 4 different star rating systems. Notice that all of them use the same HTML code and I am changing only the CSS. You can easily switch to any star rating without too much complexity.

Is this my last star rating?