Changing the input field background opacity

  • Profile Image
    editiononebooks
    Asked on July 11, 2016 at 01: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 

  • Profile Image
    John_Benson
    Answered on July 11, 2016 at 03: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:

    Hope that helps. Thank you.