asked on

CSS Input Type Text Not Working?

I want to have a general css for all Html.EditorFor and Html.TextboxFor then specialize size when needed like so:

Problem: The width never changes to 75px

[HTML]
<td>@Html.EditorFor(x => x.Limit, new { @class="amount"})</td>

[CSS]
input[type=text]
{
border: 1px solid darkslategray;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 150px;
height: auto;
color: darkslategray;
font: normal 100% Arial;
}

input[type=text].amount
{
width: 75px;
}

Gary

What is the rendered HTML?

WorknHardr

ASKER

Note: The 'Html.EditorFor' is in a MVC4 EditorTemplate (if that makes any difference)...

[View Source]
<input class="text-box single-line" data-val="true" data-val-number="The field Limit must be a number." data-val-required="The Limit field is required." id="Budgets_0__Limit" name="Budgets[0].Limit" type="text" value="9.00" /></td>

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

WorknHardr

ASKER

The width never changes if change the entire CSS to this:

[CSS]
input[type=text].amount
{
width: 75px;
}

COBOLdinosaur

try it as
input.amount[type=text] {width:75px !important;}

But I think Gary may be right and you can't override the default even with an important hack.

Cd&

Gary

You cannot pass in a custom class that way, it has its own classes that take precedence, and any new class you pass in will be ignored.
Either pass in the style directly (no class)
Or use the link I pointed to to make amendments in the objects.

WorknHardr

ASKER

Thx