Inline Textarea Style to override the CSS default

Question

I need your help with the textarea of my form fields. I have the CSS below to apply a general style for the texarea. But now i'll like to make some inline changes to some particular textarea because they are overlapping beyond the container.

Thanks for the help.

    textarea[type=text]{
    border:             2px solid #a9c6c9;
    vertical-align:         middle;
    padding:             9px;
    height:             129px;
    border-collapse:         collapse;
    margin:             2px;
    padding:             2px;
    space:             2px;
    width:             6.1in;
    z-index:             1;
    font-family: calibri;
   }

Answer 1

You can use :not to filter out the ones you don't want to change. Change your CSS selector to:

textarea[type=text]:not(#element1, #element2, ...)

Answer 2

If it's just a matter of ensuring nothing extends outside the container, try adding max-width:100%; to your textarea CSS. That should help you prevent it from going outside the container while still making all other textareas the same width.

Answer 3

Try just adding a class to the individual textarea

<!-- Original -->
textarea[type=text]{
    border: 2px solid #a9c6c9;
    vertical-align: middle;
    padding: 9px;
    height: 129px;
    border-collapse: collapse;
    margin: 2px;
    padding: 2px;
    space: 2px;
    width: 6.1in;
    z-index: 1;
    font-family: calibri;
}

then:

<!-- add this class to you individual textarea's -->
textarea[type=text].newclass{
    width: 200px;
}

or you can have it inside a div like so:

<!-- add this class to the <div> your individual textareas are inside of -->
.newclass textarea[type=text]{
    width: 200px;
}

or add this to your textarea in you html:

style="width:200px !important;"

Hope this helps