CSSのクラスが指定されたHtml.TextBoxは、フォームの検証との競合CSS（入力検証エラー）

Question

興味深い状況です。私は次のように私はビューからレンダリングHtml.Textbox（）持っている：私のコントローラで

<%= Html.TextBox("title", Model.Title, new { @class = "txt" }) %> 

を、私はタイトルで以下の、やや単純化し、検証を持っています。引数として、エラーが見つかったと仮定し、モデル状態のエラー情報でビューを再レンダリングします。

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult EditBook(string title) { 
    Model = new Book(ControllerContext.RequestContext); 
    if (String.IsNullOrEmpty(title)) 
    { 
     title = String.Empty; 
     ModelState.AddModelError("title", "* Title is a required"); 
     modelState.SetModelValue("title", ValueProvider["title"]); 
    } 
    else { // show confirmation } 

    if (!ModelState.IsValid) 
    { 
     return View("EditBook", Model); 
    } 
} 

ページが再レンダリングされるときに、私のHTMLテキストボックスが正しくそれに接続されている入力検証エラークラスを持っている...しかし、それは取り付けられた第1のクラスだと、それは無用です！テキストボックスの既存のスタイルをすべて上書きする必要があります。 html出力は次のとおりです。

が

input.txt { border: 1px; color: #000 } 
.input-validation-error { border: 2px solid #fff } 

問題は、私のオリジナルのCSSクラス「TXT」が優先され、できることから私を妨げている：

<input type="text" name="title" id="title" class="input-validation-error txt"/> 

は、以下のCSSスタイルが定義されていると仮定しますエラーテキストボックスを正しくスタイル設定します。

どのような考えですか？

Answer 1

スタイルをレンダリングするためにフレームワークに頼る代わりに、Html.ValidationMessage（）インフラストラクチャの多くをまだ使用しながら、私自身のCSSクラスを適用できるアプローチを行った。

<% bool emailError = !String.IsNullOrEmpty(Html.ValidationMessage("email")); %> 
<div id="EmailMod" class="module <%= emailError ? "error" : String.Empty %>"> 
    <label class="text_right">Email address</label> 
    <div class="input"> 
     <input type="text" id="Email" name="Email" class="input" tabindex="1" /> 
     <p id="EmailRequired" class="required <%= emailError ? "" : "hide" %>">* Please enter a valid email address.</p> 
    </div> 
</div> 

Answer 2

これは、ASP.NET MVC固有のものよりもCSSに関する質問です。 CSS specのカスケーディング注文セクションをご覧ください。念頭に置いて

、あなたは次のようにそれを微調整することで、あなたのスタイルの優先順位を変更することができます。

input.txt { border: 1px; color: #000 } 
input.input-validation-error { border: 2px solid #fff } 

入力検証エラークラスへの入力要素の追加により、の特異性を2つのスタイルは同じになります。これにより、スタイルの宣言の順序が優先順位を決定するために使用されます（この場合、最後に宣言されたものが勝利したことがスペックに示されます）。

上記の例は、優先順位を制御できる方法の1つにすぎないことに注意してください。より良い方法があるかもしれませんが、私はCSSの専門家ではありません。あなたはCSSタグを使ってCSS質問として再度尋ねると、より良い/より洞察的な反応を得るかもしれません。

PS。要素でクラス名が宣言される順序は、優先順位を決定する際には関係ありません。

Answer 3

！important修飾子を追加すると、この問題の解決に役立ちます。

.input-validation-error { border: 2px solid #fff !important; } 

また、@DSOは少し言っ修正、私はあなたにも、この試みることができるかなり確信している：私はあなたがもしあなたのことを行うことができますかなり確信して、私が言ったように

input.txt { border: 1px; color: #000 } 
input.txt.input-validation-error { border: 2px solid #fff } 

を2つのCSSクラスを持つものがあります。