Sunil Chaudhry Sunil Chaudhry - 3 months ago 14
CSS Question

how to make textarea looks like input[text] on form invalid

This is how my textarea looks like on invalid, how to make it bit like textboxes (with smaller border arround)

it looks like this

It should look like the below image.

enter image description here

I used the below css but not working.

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

textarea:required {
box-shadow: none;
}


Design:-

<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

This is the solution:-

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

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