Question

CSS is defaulting to input[type=”text”] style. How can I make the .wideTextBox take precedence?

 @Html.TextBoxFor(model => model.ConsumerBatchInVM.OptInSmsMessage, new { @class = "wideTextBox" })




.wideTextBox
{
    width: 400px;
}

input[type="text"] 
{
    width: 300px;
    border: 1px solid #CCC;
}

Answer 1

You could do:

input[type="text"] {
    ..
}
input.wideTextBox {
    ..
}

That is, swap the order and change .wideTextBox to input.wideTextBox.

Swapping the order alone won’t work, and neither will input.wideTextBox alone.

---

More information on CSS specificity: http://css-tricks.com/855-specifics-on-css-specificity/

A specificity calculator: http://www.suzyit.com/tools/specificity.php