如何使textarea的樣子輸入【正文】在形式無效

Question

這是我的textarea怎麼看起來像無效，如何使它有點像文本框（帶角落找尋更小的邊框）

它應該看起來像下面的圖像。

我用下面的CSS，但沒有工作。

textarea:focus:required:invalid { 
    background-color: lightyellow; 
} 

textarea:required { 
    box-shadow: none; 
} 

設計： -

<asp:TextBox ID="txtName" runat="server" placeholder="First Name" CssClass="mytxtCalendar required" MaxLength="30"></asp:TextBox> 
<asp:TextBox ID="txtAddress" runat="server" placeholder="Correspondence Address" Height="50px" TextMode="MultiLine" CssClass="mytxtCalendar required" MaxLength="120"></asp:TextBox> 

Answer 1

這是解決方案： -

textarea.mytxtCalendar.required { 
    box-shadow: none; 
} 

    textarea.mytxtCalendar.required:focus { 
     background-color: lightyellow; 
    } 

Answer 2

添加outline: none;到textarea它將爲textarea被刪除的陰影。

textarea:required { 
    box-shadow: none; 
    outline: none; //Added this 
} 

Answer 3

試試這個。

textarea:required { 
    box-shadow: none; 
    resize: none; 
}