如何使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:required {
    box-shadow: none;
    resize: none;
}

Answer 2

将outline: none;添加到textarea，它将删除textarea的影子。

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

Answer 3

这是解决方案： -

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

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