Change size of stars in star rating question type

Question

I'm hoping someone can help me with the CSS required to make the size of stars larger in star-rating type questions, please? I found the below thread on the topic, but it provides no solution other than to make the text smaller {"emoji": {"emojiChar": "😕"}}https://www.qualtrics.com/community/discussion/1806/position-and-size-adjustment-for-starsThank you!

TomG · Accepted Answer

You can't use CSS to change the size of the stars.  The stars are images and the highlighting is tied to the size of the images.

Candace · Answer

https://community.qualtrics.com/XMcommunity/discussion/comment/26126#Comment_26126TomG  We want to modify the default image of stars.We created a new image to replace and uploaded it to the qualtrics image library.We performed a test with the inspect tool and it worked, it was iterative with the new image.The problem occurred when we added the CSS code in Look and feel >> Style >> Custom CSS. Image replacement has become static, it is not possible to change the selection of the amount of stars.Our Custom CSS:Skin .STAR .BarContainer{top:0; width: 250px;}.Skin .STAR .StarsContainer,.Skin .STAR .StarsContainer .Filled,.Skin .STAR .StarsEventWatcher{height:34px;background:transparent url(https://poliedro.qualtrics.com/ControlPanel/Graphic.php?IM=IM_dniuLMuKO0BZJ2e) 0 0 !important;}.Skin .STAR .StarsOuterContainer{margin:1px;}.Skin .STAR .StarsContainer{background-position:0 -33px;position:relative; width: 182px !important; height: 32px !important;}.Skin .STAR .StarsContainer .Star{width:39px;height:36px;background:transparent url(https://poliedro.qualtrics.com/ControlPanel/Graphic.php?IM=IM_dniuLMuKO0BZJ2e) 0 0 !important;float:left}.Skin .STAR .StarsContainer .RealSlider{height:30px;position:asolute;top:0;left:0;opacity:0}Our Survey:Pesquisa_-_Refeitrio_Alojamento.qsfHow it's supposed to be:estrelas_correto.zip

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded