Override css for a text box error message

Question

I am displaying a phone number in the view as follows

    <li>
    <label >
    Home No.</label>
    @Html.TextBoxFor(x => x.PhoneHome)
    </li>

And the validation error message class genereated by default is as follows

.formError .formErrorContent
{

background: #ee0101;
color: #fff;
width: 150px;
font-family: tahoma;
font-size: 11px;
border: 2px solid #ddd;
box-shadow: 0px 0px 6px #000;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
padding: 4px 10px 4px 10px;
border-radius: 6px;
-moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 display:inline;
}

This css is used for all the other fields so I dont want to change this one. I want to override some of the properties in this css for the Home Phone number field.

How can I override and use css only for a specific field?

Darin Dimitrov · Accepted Answer · 2013-09-27 08:15:31Z

1

You could assign a class to the wrapper <li> element:

<li class="phone">
    <label>Home No.</label>
    @Html.TextBoxFor(x => x.PhoneHome)
</li>

and then in your CSS you could add a new rule:

.phone .formError .formErrorContent {
    -- YOUR CUSTOM RULES COME HERE --
}

answered Sep 27, 2013 at 8:15

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Override css for a text box error message

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related