Sunil Chaudhry Sunil Chaudhry - 23 days ago 4
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;
    }
Comments