Required field css format

  • Profile Image
    pari223
    Asked on November 04, 2013 at 11:19 AM

    Hello, 

    I would like to change the CSS for required field. I dont want to the arrow below the feilds. I just want the red border around the fields to show up that its requried. 

    I used the following css in nova.css but its not working. please help me where and how i need to change to get the desired result. please let me know what am i missing. some part works. but when i click next button it doest show missing fields..

    .form-line-active {

    background-color:#FFFFFF;

    }

    .form-required {

    color: #527fb1 !important;

    }

    input,textarea,select {

    background-color: #FFFFFF;

    border:1px inset #e7e7e7;

    }

    .form-required {

    color: transparent;

    }

    .form-line-error {

    background:none repeat scroll 0 0;

    }

    .form-error-message {

    display: none !important;

    background-color:transparent !important;

    color:#000000!important;

    }

    .form-line-error input, .form-line-error textarea {

    border: 1px solid #e7e7e7;

    -moz-box-shadow: none !important;

    -webkit-box-shadow: none !important;

    box-shadow: none !important;

    }

    .form-all{

    float:left;

    padding-top:0px !important;

    }

    .form-line-active {

    background:white;

    color:#000000;

    }

    .form-textbox {

    width: 290px;

    }

    .form-textarea {

    width: 290px;

    }

    .form-line, .form-label-left {

    padding-left: 0;

    }

     

    Thanks in advance. 

  • Profile Image
    pinoytech
    Answered on November 04, 2013 at 11:38 AM

    Hi,

    Can you please take a look at this clone form which I made some workaround on it if this is something you want to achieve?

    http://www.jotformpro.com/form/33074203676957

    If yes, inject this custom css into your form in order to achieve that.

    .form-line-error {

    border: 2px solid #e15353 !important;

    }

    .form-line-error .form-error-message {

    display: none;

    }

    #id_3 {

    margin-left: 10px !important;

    }

    If you need further assistance, please let us know.

    Thank you!