Radio Button and Check Box styling issue on IE Browsers

  • Profile Image
    PsyClinic
    Asked on December 10, 2012 at 06:43 AM

    Hi,

    When a required field is not filled in you have a msg popup pointing to that field. In IE and firefox, using a likert-type scale (1 to 7 choices), along with the popup I have a red square as an indicator on option seven.

    is it something i "injected" and can it be fixed (in a study this would be a serious compromise of your results - since you are "pointing your subject to an specific option!).

     

    thnx

    jm

  • Profile Image
    jonathan
    Answered on December 10, 2012 at 09:02 AM

    Hi JM,

    You may want to inject this additional CSS code to get rid of the red box validation error indicator.

    .form-validation-error {

    border: none;

    box-shadow: none;

    }

    Please inform us if this does not make any difference.
    Thanks.
  • Profile Image
    PsyClinic
    Answered on December 10, 2012 at 10:49 AM

    hi,

    you guys are fast:) thanks for the fix!

    it worked very well with firefox, however in IE, although the red square is gone the last option is still "marked" with a white depression indicator. it still draws your attention - i know it’s a bit picky, but psyc studies have this type of crap about them.

    is it fixable, or is an IE issue?

    jm

  • Profile Image
    jeanettebmz
    Answered on December 10, 2012 at 12:31 PM

    Is this what you are looking for?  That is a clone of your form and below find the custom CSS I have used

    .form-validation-error {

    border: none!important;

    box-shadow:none!important;
    }

    .form-error-message {
    background-color:transparent !important;
    display:#fffff!important;
    }

    You can change the color of the font by adding the color code of your preference after display

  • Profile Image
    PsyClinic
    Answered on December 10, 2012 at 03:44 PM

    hi again,

    thank you for taking the time. 

    Not quite what i was referring to. if you look at the screen capture (jonathan), his red arrows are pointing to a "white" radio button -  the others are not white. this shows up on IE 8 and it seems IE9.

    thanx again,

    jm

  • Profile Image
    idarktech
    Answered on December 10, 2012 at 04:48 PM

    Hi JM,

    We'll see if we can find a possible fix for this. We'll let you know here.

    Thanks for pointing that out.

  • Profile Image
    idarktech
    Answered on December 10, 2012 at 05:50 PM

    JM,

    Inject the following CSS codes to your form, this might fixed it.

    .form-validation-error{

    border:none !important;

    -moz-box-shadow:none !important;

    -webkit-box-shadow:none !important;

    box-shadow:none !important;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Thanks!

  • Profile Image
    idarktech
    Answered on December 11, 2012 at 02:43 AM

    Hi JM,

    Sorry, I just tested my previous codes and they're not helpinh at all.

    I think I found a possible fix but this can only be achieved using form full source code and manually remove the border property under .form-validation-error class on form.css file. If you need further clarifications, let us know.

    Thanks!

  • Profile Image
    Rajesh 
    Answered on February 10, 2016 at 10:30 AM

    how to get the IE 8 style for radio button in IE11?
  • Profile Image
    BJoanna
    Answered on February 10, 2016 at 11:41 AM

    @Rajesh

    Considering that this is an old thread, I have moved your question to separate thread and we will provide you an answer there shortly. 

    http://www.jotform.com/answers/769077