Changing the input field background opacity

  • editiononebooks
    Asked on July 11, 2016 at 1:41 PM

    Hello

    I have this new form which has a background image. I am trying to figure out how to have the data entry fields appear with a mask / transparency to make them standout from the background image without having them be totally white. Ideally it would appear as a faded / semi transparent background for only the areas where the user will enter info. 

    Thanks!

     

    Ben 

  • John_Benson
    Replied on July 11, 2016 at 3:13 PM

    I understand what you mean. You can use this custom CSS:

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input, .form-spinner input {
    background-color: rgba(46, 97, 132, 0.5) !important;
    }

    Here's a guide on how to add custom CSS to the form.

    The rgba values correspond to the color and the opacity of the input fields. The first 3 which is 46, 97, 132 is the color light blue that has the hex color of #2e6184. While the 0.5 is the opacity. You can adjust it to your preferred values.

    If you want, you can add these additional codes to remove the box shadow and make the border stand out.

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {
    border: 1px solid #1E3D51 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    }

    Here's the result:

    Changing the input field background opacity Image 1 Screenshot 20

    Hope that helps. Thank you.