Question T7091
Visible to All Users

Progress Bar Buttons Color

created 4 years ago

Hey there, I am sure there is a simple answer for this but I cannot find it anywhere.

How would one change the color of the buttons of the Progress Bar Type Button. Changing the theme of the survey seems to neglect what the buttons are doing Clipboard-File-1.png

Answers approved by surveyjs Support

created 4 years ago

Hello,

You can write your own CSS rules:

CSS
.sv_progress-buttons__list-container .sv_progress-buttons__list li::before { border: 3px solid red; background-color: red; } .sv_progress-buttons__list-container .sv_progress-buttons__list li::after { background-color: yellow; } .sv_progress-buttons__list-container .sv_progress-buttons__list li.sv_progress-buttons__list-element--current::before { border-color: pink; background-color: white; } .sv_progress-buttons__list-container .sv_progress-buttons__list li.sv_progress-buttons__list-element--passed::before { border-color: orange; background-color: orange; } .sv_progress-buttons__list-container .sv_progress-buttons__list li.sv_progress-buttons__list-element--passed + li::after { background-color: cyan; }

Here is the working sample - https://plnkr.co/edit/xy3oTAtlgTPiCsGT

Thanks, Serge
SurveyJS Team