內聯Textarea樣式覆蓋CSS默認

Question

我需要您在我的表單字段的文本區域方面的幫助。 我在下面使用CSS為texarea應用常規樣式。 但是現在我想對某些特定的textarea進行內聯更改，因為它們重疊在容器之外。

謝謝您的幫助。

    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

您可以使用:not過濾掉您不想更改的內容。 將您的CSS選擇器更改為：

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

Answer 2

如果只是要確保沒有任何東西延伸到容器之外，請嘗試添加max-width:100%; 到您的textarea CSS。 這樣可以幫助您防止其從容器中移出，同時仍使所有其他文本區域具有相同的寬度。

Answer 3

嘗試僅將一個類添加到各個文本區域

<!-- 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中的textarea中：

style="width:200px !important;"

希望這可以幫助