How Do I Resize My Form's Text Areas so That They Have the Same Width in All Browsers?

  • Profile Image
    m1hunter
    Asked on November 20, 2015 at 10:42 PM

    Hello I was having trouble with my text boxes being different sizes across differant web browsers and I found this code in the help sectioninput[type="text"], textarea {

    width: 180px;

    }

    Now all of the text boxes are sized correctly but my text area is not at the width i want it. It is only aloud to be as wide as the text boxes because of the above code. Is their another css code I could enter for the text area so I could size it to the width I want it and it would look the same across all browsers. Below is a link to my sample form. Thanks in advance.

    https://form.jotform.com/53238536697165

  • Profile Image
    abajan
    Answered on November 21, 2015 at 11:47 AM

    Thanks for asking. You could just remove , textarea from the selector, so that the rule affects the the width of the text boxes only. Now, to change the width of just the existing text area, inject the following additional rule, adjusting the declaration's value to suit:

    #input_6 {
       width: 366px;
    }

    That rule would affect just that specific text area. To have it work for all future text areas in the form, you would need to target their class by changing the selector as follows:

    .form-textarea {
       width: 366px;
    }

    So, the entire block of CSS would now be:

    input[type="text"] {
       width: 143px;
    }

    .form-textarea {
       width: 366px;
    }

    The result would be like this clone of your form. This guide has information finding out field IDs.

    If there's anything else with which you need assistance, please let us know. If there's nothing else, just enjoy your weekend :)

    Cheers