CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3cssrazor
arame3333
arame3333

Reputation: 10223

MVC3, CSS3 - cannot get styles picked up in a textbox

I have just seen a training video about CSS3 and it looked a great idea to put in these styles in my MVC application;

input.data:required {
    background-color: rgba(255, 0, 0, 0.04);
}

input.data:focus {
    background-color: rgba(255, 255, 255, 0.8);
    border: 5px solid #ff5400;
}

So this will put in a background colour for required fields, and highlight the textbox that is in focus. However these styles do not get picked up in my MVC form;

            <tr>
                <td style="text-align: right">
                    Client Organisation Name<span class="error">*</span>
                </td>                    
                <td>
                    @Html.TextBoxFor(model => model.clientContact.ContactName, 
                        new { autocomplete = "off", maxlength = "255", style = "text-transform: capitalize; width:400px;" })
                    @Html.ValidationMessageFor(model => model.clientContact.ContactName)
                </td>
            </tr>

When I inspected the textbox field, I saw the input element had a type of "text-box". So I changed input.data to input.text-box and input.text. But this did not work either. So what do I need to do to get this to work?

Upvotes: 0

Views: 372

Answers (1)

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

.data is actually a class name applied on textbox. Define a css class name data on your textbox.

Like this:

<td>
    @Html.TextBoxFor(model => model.clientContact.ContactName, 
        new { autocomplete = "off", maxlength = "255", @class= "data", style = "text-transform: capitalize; width:400px;" })
    @Html.ValidationMessageFor(model => model.clientContact.ContactName)
</td>

Note the @class= "data" in the above code.

OR use another way mentioned below:

use input[type=textbox] instead of input.text-box or input.data in your css like this:

input[type=textbox]:required {
    background-color: rgba(255, 0, 0, 0.04);
}

input[type=textbox]:focus {
    background-color: rgba(255, 255, 255, 0.8);
    border: 5px solid #ff5400;
}

Upvotes: 1

Related Questions