0

CSS3 に関するトレーニング ビデオを見たばかりですが、これらのスタイルを MVC アプリケーションに組み込むのは素晴らしいアイデアに思えました。

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;
}

したがって、これにより、必須フィールドの背景色が設定され、フォーカスされているテキストボックスが強調表示されます。ただし、これらのスタイルは私の MVC フォームでは取得されません。

            <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>

テキストボックスフィールドを調べたところ、入力要素のタイプが「テキストボックス」であることがわかりました。そこで、input.data を input.text-box と input.text に変更しました。しかし、これもうまくいきませんでした。では、これを機能させるにはどうすればよいでしょうか。

4

1 に答える 1

1

.dataは実際には に適用されるクラス名textboxです。テキストボックスにCSS クラス名を定義dataします。

このような：

<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>

@class= "data"上記のコードに注意してください。

または、以下に示す別の方法を使用します。

input[type=textbox]次のように、CSSの代わりに、input.text-boxまたはCSS で使用input.dataします。

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;
}
于 2012-08-15T10:42:53.410 に答える