-
marketing905Asked on January 13, 2017 at 8:12 AM
Hi,
Is there anyway to use a custom image as a star rating? I'd really like to use a custom one as the "stars" available to me are too small.
Many thanks,
Richard
-
Kevin Support Team LeadReplied on January 13, 2017 at 8:52 AM
Unfortunately there is not a way to change the images in the star rating field or increase its size without affecting the field functionality.
I will forward this thread to our second level as a feature request, although we cannot provide an ETA or ensure this will be developed we will let you know as soon as we get updates regarding this.
-
Scott JotForm DeveloperReplied on January 13, 2017 at 1:10 PM
Hey Richard,
I forwarded your request but as my colleague Kevin said we can't ensure you if this will be ever implemented or not.
But by curiosity I tried this CSS3 property where you can scale objects. Maybe this can interest you.
If you inject this CSS code below, you can make the star rating field a little bit bigger by compensating on the image quality:
.form-star-rating {
transform : scale(1.25,1.25);
} -
marketing905Replied on January 16, 2017 at 5:41 AM
Thank you Scott,
That's definitely been a big help.
-
Scott JotForm DeveloperReplied on January 16, 2017 at 5:45 AM
You are welcome Richard,
If there is anything that I can help you with, just let me know,
Cheers.
-
trickynekReplied on February 13, 2017 at 12:45 PM
Hi, I am using your transform solution to scale my rating stars larger, it works great in Chrome, but changes are not visible on Safari / Ipad. Do you have any suggestions?
-
Kevin Support Team LeadReplied on February 13, 2017 at 1:38 PM
You could add a vendor prefix so the code works in all browsers, here's a link with more info about it: https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
Here's the code given above with the browsers prefix added:
.form-star-rating {
transform : scale(1.5);
-webkit-transform : scale(1.5);
-moz-transform : scale(1.5);
-o-transform : scale(1.5);
-ms-transform : scale(1.5);
}
Hope this helps.