title: CSS style not being applied with input-validation-error in ASP.NET MVC 4.0
body: <p>I am trying to alter the border of an input to a different color when that input throws a validation error in ASP.NET MVC. From what I can tell, I am ndoing it correctly, but alas it doesn't work. This is mainly a CSS question, but I have posted all relevant information to the process.</p>
  
  <p>First the code snippet for the view:</p>
  
  <pre><code>@using (Html.BeginForm())
  {
      @Html.ValidationSummary(true)
      &lt;div class="form_settings"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Create New Log&lt;/legend&gt;
              &lt;table id="error-organizer"&gt;
                  &lt;tr class="transparent"&gt;
                      &lt;td class="transparent"&gt;
                          Employee
                      &lt;/td&gt;
                      &lt;td class="transparent"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="transparent"&gt;
                      &lt;td class="transparent"&gt;@Html.EditorFor(model =&gt; model.Requestor)
                      &lt;/td&gt;
                      &lt;td class="transparent"&gt;@Html.ValidationMessageFor(model =&gt; model.Requestor)
                      &lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>
  
  <p>I am validating this in the model, not the controller, using a custom data annotation. I know that this works because I am getting the error messages in the browser as expected.</p>
  
  <p>Here are the two CSS styles for this input.</p>
  
  <pre><code>#error-organizer input .input-validation-error
  {
      border: 3px solid #cc0; 
  }
  
  .form_settings input, .form_settings textarea, .form_settings select { 
    padding: 5px; 
    margin: 0 0 8px 8px;
    width: 150px; 
    font: 100% arial; 
    border: 1px solid #6F6147; 
    background: #EFF8FB; 
    color: #47433F;
    border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    -webkit-border: 7px 7px 7px 7px;  
  }
  </code></pre>
  
  <p>The first style is what needs to be applied when the error happens. The second style is the default style that is currently taking precedence. However, note that if I remove the .input-validation-error from the first style, it overrides the second one all the time.</p>
  
  <p>Finally, here is the relevant portion of the view source on the website (after triggering an error):</p>
  
  <pre><code>&lt;form action="/QCLogs/Create" method="post"&gt;&lt;div class="validation-summary-errors"&gt;&lt;ul&gt;&lt;li style="display:none"&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;    &lt;div class="form_settings"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Create New Log&lt;/legend&gt;
              &lt;table id="error-organizer"&gt;
                  &lt;tr class="transparent"&gt;
                      &lt;td class="transparent"&gt;
                          Employee
                      &lt;/td&gt;
                      &lt;td class="transparent"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="transparent"&gt;
                      &lt;td class="transparent"&gt;&lt;input class="input-validation-error text-box single-line" data-val="true" data-val-number="The field Requestor must be a number." data-val-range="The field Requestor must be between 1 and 9999." data-val-range-max="9999" data-val-range-min="1" data-val-required="The Requestor field is required." id="Requestor" name="Requestor" type="number" value="1234" /&gt;
                      &lt;/td&gt;
                      &lt;td class="transparent"&gt;&lt;span class="field-validation-error" data-valmsg-for="Requestor" data-valmsg-replace="true"&gt;Invalid employee number.&lt;/span&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="transparent"&gt;
                      &lt;td class="transparent"&gt;
                          Type
                      &lt;/td&gt;
                      &lt;td class="transparent"&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>
  
  <p>From the behaviour, it seems as though the CSS style is not responding to the .input-validation-error class even though it says it is there in the view source. However, I am not a CSS master either so I am hoping it is something simple I am overlooking.</p>
  
  <p>Many thanks in advance for your help.</p>