Inline Textarea Style для переопределения CSS по умолчанию

Question

Мне нужна ваша помощь в текстовом поле моих полей формы. У меня есть CSS ниже, чтобы применить общий стиль для texarea. Но теперь я хочу сделать некоторые встроенные изменения в определенную текстовую область, потому что они перекрываются за пределами контейнера.

Спасибо за помощь.

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

Попробуйте просто добавить класс к индивидуальной текстовой

<!-- 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; 
} 

затем:

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

или вы можете иметь его внутри DIV так:

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

или добавить этот на ваш текст в вашем html:

style="width:200px !important;" 

Надеюсь, это поможет

Answer 2

Вы можете использовать :not отфильтровать те, которые вы не хотите изменить. Измените селектор CSS для:

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

Answer 3

Если это просто вопрос не обеспечивая ничего выходит за пределы контейнера, попробуйте добавить max-width:100%; к вашему TEXTAREA CSS. Это должно помочь вам предотвратить его выход из контейнера, в то же время делая все остальные текстовые области одинаковой ширины.