Form Formitting TextArea

我正在研究一個項目，我希望網站上的用戶能夠將文本輸入到w3-cells。Form Formitting TextArea

我正在使用w3單元格，因爲它們會自動更改形狀以適合頁面，但我遇到了使textArea自動更改佈局形狀的問題。

在我看來，HTML甚至沒有被CSS所改變，但我在我的代碼中找不到任何錯誤：/。

注意：ideaText的textArea的CSS工作正常;我的問題是與bodyCells。

HTML：

<div id="top"> 
    <div id="idea"> 
    <textArea id="ideaText" placeholder="Introduce your topic here..."> 
    </textArea> 
    </div> 
    <div id="body"> 
    <div class="w3-cell-row" id="bodyCells"> 
     <div id="evidence1" class="w3-container w3-red w3-cell"> 
     <textArea placeholder = "Write some stuff..."> 
     </textArea> 
     </div> 
     <div id="evidence2" class="w3-container w3-green w3-cell"> 
     <textArea></textArea> 
     </div> 
     <div id="evidence3" class="w3-container w3-yellow w3-cell"> 
     <textArea></textArea> 
     </div> 
     <div id="evidence4" class="w3-container w3-blue w3-cell"> 
     <textArea></textArea> 
     </div> 
     <div id="evidence5" class="w3-container w3-purple w3-cell"> 
     <textArea></textArea> 
     </div> 
    </div> 
    </div>

CSS：

#idea{ 
    background: #b35900; 
    height: 150px; 
} 

textArea#ideaText{ 
    background: rgba(0,0,0,0.2); 
    width: 100%; 
    height: 150px; 
    font-size: 28px; 
} 

textArea#bodyCells{ 
    background: rgba(0,0,0,0.2); 
    width: 100%; 
    height: 150px; 
    font-size: 28px; 
} 

.w3-cell-row#bodyCells{ 
    height: 150px; 
}

來源

2017-07-15 joe55460

你有錯的CSS選擇器，它沒有「抓」的HTML你想要的元素。在你的html中沒有textArea#bodyCells。 textArea#bodyCells搜索<textArea id="bodyCells">，這在您看來並不存在。這就是爲什麼它看起來像CSS是不是在那個元素工作。

順便說一句，我建議你只在css選擇器中使用類（不帶ID）。更簡單的選擇器將更易於維護和開發。 :)

來源

2017-07-15 15:28:17 kamyl

非常感謝。我在每個textarea中都使用了相同的ID，這是可行的。 – joe55460

這只是選擇器順序中的一個小錯誤。你輸入什麼：

textArea#bodyCells{}

應然：

#bodyCells textArea{}

Here's your code工作就像你希望它...我希望。

來源

2017-07-15 15:46:17

Form Formitting TextArea

回答

相關問題