Custom styled scale rating inputs are not working in IE and FF

  • fivestardestin
    Asked on September 14, 2016 at 12:17 PM

    Question about custom scale rating styling

    On one of our survey forms, we're having issues with our scale rating styles not appearing in certain browsers, specifically Firefox and IE. In Chrome (mobile and desktop) and Safari (desktop and iOS) they appear as intended (showing the stars as radio buttons). But in FF and IE, the buttons go missing.

    They styling is visible on other radio buttons in FF as well, adding to the mystery. This seems to only be affecting the radio buttons in the scale rating itself.

    I've provided a link. Open in both Chrome and Firefox or IE to see what I'm talking about. This first scale ratings show up on page 2 (after clicking 'next' on the first page). You can also see another radio field that displays properly.

    Can you think of any reason other buttons show the styling while the scale does not?

  • Mike
    Replied on September 14, 2016 at 2:06 PM

    Thank you for contacting us.

    This is most probably not working in IE and FF since we do not have labels for radio inputs inside the Scale Rating field. Unfortunately, I doubt that we can help with this one.

  • fivestardestin
    Replied on September 14, 2016 at 4:48 PM

    Thanks anyway. It's understandable because we kinda went outside the box with CSS to make the radio buttons in the scale rating appear as stars. Not sure how many other JotForm users have 'customized' their scale ratings like we have, so I just wondered if you'd heard similar problems doing this in those specific browsers.

    I coded in a CSS 'hack' for Firefox that makes the default radio buttons appear (instead of just going missing) so that the survey taker can at least choose an answer, while it still appears as intended in Chrome and Safari. Seems to be working that way.

  • Mike
    Replied on September 14, 2016 at 6:51 PM

    I have never seen customized Scale Rating fields used by other users.

    It is common to use a Star Rating tool instead, so you might consider it too.

    Custom styled scale rating inputs are not working in IE and FF Image 1 Screenshot 20

    Please feel free to contact us if you need any further assistance.