Как заставить пароль и почтовые ящики выглядеть одинаково в бритве

Question

В этом изображении вы можете видеть, что на моей веб-странице окно редактора паролей выглядит иначе, чем окно текстового редактора электронной почты. Я посмотрел примеры использования одного и того же поля для поля ввода пароля и текстового редактора и обнаружил это . Показывая, что оба они имеют класс form-control, они выглядят одинаково. Однако мой код cs html также содержит оба моих редактора, использующих класс form-control, показанный ниже

        <div class="form-group">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new {@class = "form-control"} })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.PasswordFor(model => model.Password, new { htmlAttributes = new {@class = "form-control" } })
            </div>
        </div>

Как мне отредактировать поле пароля, чтобы оно выглядело так же, как поле электронной почты?

Answer 1

Я не знаю, что вызывает эту проблему, но я видел ее раньше. Чтобы исправить это, вы можете использовать @Html.EditorFor для пароля и расширить htmlAttributes с new { htmlAttributes = new { @class = "form-control" } } до new { htmlAttributes = new { @class = "form-control", @type = "password" } }.

Это будет ваш код

<div class="form-group">
    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", @type = "password" } })
    </div>
</div> 

Надеюсь, это обеспечит ясность.