How does one remove error messages and pink background highlighting, leaving just the red borders?

  • Profile Image
    adharamoveis
    Asked on January 17, 2014 at 04:36 PM

    http://upamais.com/images/78158334934832845166.png

     

    How i do to remove the background red error and the message when no field is populated and click send?

     

    Tks

  • Profile Image
    abajan
    Answered on January 17, 2014 at 06:55 PM

    Hello,

    Injecting the following CSS should accomplish that:

    .form-line-error {
    background: transparent;
    }

    .form-error-message {
    display: none;
    }

    If you wish to hide the message by the submit button too, change the second rule to:

    .form-error-message,
    .form-button-error {
    display: none;
    }

    If you need furthter assistance with this, please let us know.


    Thanks

  • Profile Image
    adharamoveis
    Answered on January 18, 2014 at 02:36 AM

    Hi, thanks for your help!!

     

    Just one more thing. How can i change the color of the instruction text? It's possible?

  • Profile Image
    abajan
    Answered on January 18, 2014 at 05:05 AM

    Hi again,

    Had I checked your account before posting my last reply I would have seen that it was a Pastel themed form to which you were referring. (One of my colleagues [Jonathan] alerted me to this.) To achieve the same result, such forms require two additional rules and an extra declaration in the first rule. Please replace what I earlier provided with the following:

    .form-line-error {
    background: transparent;
    text-shadow: none;
    }

    .form-line-error .form-sub-label {
    color: #777;
    text-shadow: 0 1px 0 #EEE;
    }

    .form-line-error .form-label-right {
    color: #524B3A;
    text-shadow: 0 1px 0 #EEE;
    }

    .form-error-message {
    display: none;
    }

    (The extra declaration and rules are highlighted)

    The result should be like this clone.

    If the form were to have left-aligned and top-aligned field labels as well as the right-aligned ones, you would need to amend the third rule to target those too:

    .form-line-error .form-label-right,
    .form-line-error .form-label-left,
    .form-line-error .form-label-top {
    color: #524B3A;
    text-shadow: 0 1px 0 #EEE;
    }


    Cheers

  • Profile Image
    abajan
    Answered on January 18, 2014 at 05:38 AM

    Actually, it appears that you already found a solution which is better than mine because less CSS is required.

    Nice! :)