Highlight a textbox with red border when it is required

Question

I'm using css to highlight a textbox with red border when it is required

.garbage[style*=inline] + input,
.garbage[style*=inline] + select,
.garbage[style*=inline] + textarea {
    background-color: #ffcccc;
    border: 1px solid #ff0000;
}

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="Txt_fullname" runat="server" ErrorMessage="RequiredFieldValidator"  class="garbage" SetFocusOnError="true" ValidationGroup="submit" Display="Dynamic">Type this field please.</asp:RequiredFieldValidator>
                                
<asp:TextBox   ID="Txt_fullname" runat="server" ></asp:TextBox>
                                
<asp:Button ID="Btn_submit" runat="server"  Text="submit form" CausesValidation="true" ValidationGroup="submit" 
                                   onclick="Btn_submit_Click"  />

the problem is the css not apply until I click on the textbox

try from this link it may helpful to you http://stackoverflow.com/a/21239351/2798643 — Govinda Rajbhar, Jan 07 '16 at 09:30
Hi, Were you able to solve this issue? I am facing this issue, but only in IE, it's working fine on Chrome. Thanks.. — Milind Thakkar, Nov 06 '16 at 11:11

score 0 · Answer 1 · answered Jan 07 '16 at 09:14

0

Use CSS :

:required {
  border-color: red;
}

answered Jan 07 '16 at 09:14

Coder002

275
2
14

I use asp:RequiredFieldValidator control that not add required attribute to input – Mo7ammed Jan 07 '16 at 09:30
you can try to add :CssClass="error" to your asp:RequiredFieldValidator Then add css: error{ border-color: red; } – Coder002 Jan 07 '16 at 09:34

score 0 · Answer 2 · answered Jan 07 '16 at 09:22

0

If you put required attribute on one radio button (or any combination), that particular group of radio buttons will be required.

On checkboxes, makes each individual checkbox required (to be checked).

<input type="checkbox" name="checkbox" required="">

or

<input type="checkbox" name="checkbox" required="required">

CSS

:required{
    border-color: #FF0000;
}

answered Jan 07 '16 at 09:22

Peyman Mohamadpour

17,954
24
89
100

I use asp:RequiredFieldValidator control that not add required attribute to input – Mo7ammed Jan 07 '16 at 09:29
Could u please share ur page source? the HTML output – Peyman Mohamadpour Jan 07 '16 at 09:34

Highlight a textbox with red border when it is required

2 Answers2