Hto use the Text html field to achieve the opaque background, semi rounded border

  • Profile Image
    ChildrensChristianSchool
    Asked on May 24, 2016 at 01:56 PM
    ID input 75, I need to know how I can get the text centered, or how to use the "text" html field to achieve the opaque background, semi rounded border with text centered. (Read Only) I'm open to suggestions.
  • Profile Image
    Mike_G
    Answered on May 24, 2016 at 03:10 PM

    You can add the CSS codes below to your form to achieve that. 

    textarea#input_75 {
        border-radius: 10px !important;
        text-align: center !important;
        opacity: 0.6;
    }

    Here's how it should look like after.

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image
    ChildrensChristianSchool
    Answered on December 12, 2016 at 02:16 PM

    I had my form working perfectly but now the text in this box is no where, and it is supposed to be read only. 

    https://form.jotform.com/ChildrensChristianSchool/2016-2017

     

    +the buttons to go to external url have failed (I have them hidden and replaced temporarily)

    Please help!

  • Profile Image
    Mike
    Answered on December 12, 2016 at 05:08 PM

    Since you have replaced the Text Area field with the Text HTML field, you can try the following.

    1) Wrap your text into a div with some ID.

    Example:

    <div id="opacityBox">
    <p style="text-align:center;">Text Here</p>
    </div>

    2) Then, add the CSS to your form.

    Example:

    #opacityBox {
    padding : 20px;
    background : rgba(204,204,204,0.6);
    border-radius : 10px;
    }

    Result: