У меня есть приложение MVC 5 с представлением входа.

Центральная часть окна входа в систему выглядит следующим образом:

enter image description here

enter image description here

enter image description here

HTML (часть):

<div class="login-lower-part">
    <div class="login-form-wrapper">
        @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
        {
            @Html.AntiForgeryToken()
            <div class="form-group">
                <div class="col-md-10">
                    @Html.TextBoxFor(m => m.UserName, new { id = "username", @class = "login-username", @placeholder = AppMessages.UserName })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-10">
                    @Html.PasswordFor(m => m.Password, new { id = "password", @class = "login-password", @placeholder = AppMessages.Password })
                </div>
            </div>
            <div class="login-error-message">
                <div class="login-error-message-text">
                    <span id="errorMessage" class="login-custom-error-validation">
                        @if (Model != null)
                        {
                            @Model.ErrorMessage
                        }
                    </span>
                </div>
            </div>
            <div class="form-group">
                <input id="login" class="login-submit-button" type="submit" value="Вход" />
            </div>
        }
    </div>

CSS:

.login-username {
    background: #b29957;
    background-image: url(../Images/user.png);
    background-repeat: no-repeat;
    background-position: 3px 6px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    padding-left: 32px;
    border: 1px solid #b29957;
    border-bottom: 1px solid #8d6e63;
    width: 270px;
    height: 40px;
    outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px #b29957 inset;
    transition: background-color 5000s ease-in-out 0s;
}

Как видите, проблема в том, что изображение исчезло.

css
0
tesicg 10 Янв 2018 в 13:21

1 ответ

Лучший ответ

Для этого нет никакого взлома. Если вы хотите, чтобы ваш background-image отображался при автозаполнении, вам необходимо изменить часть разметки HTML.

Поскольку вы используете структуру bootstrap , я бы посоветовал вам использовать .input-group-addon для ваших значков. Ниже я сделал для вас рабочий фрагмент. Взглянуть

.login-username {
  background: #b29957;
  background-repeat: no-repeat;
  background-position: 3px 6px;
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  border: 1px solid #b29957;
  border-bottom: 1px solid #8d6e63;
  width: 270px;
  height: 40px;
  outline: none;
}

.input-group-addon.login-icon {
  background: #b29957 url(http://servotech.in/wp-content/uploads/2016/10/user-icon-placeholder.png) no-repeat center center;
  background-size: 24px 24px;
  width:40px;
    border: 1px solid #b29957;
    border-bottom: 1px solid #8d6e63;
    border-radius:0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #b29957 inset;
  transition: background-color 5000s ease-in-out 0s;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-xs-10">
    <form>
      <div class="input-group">
        <span class="input-group-addon login-icon" id="basic-addon1"></span>
        <input type="text" class="login-username" placeholder="Username" aria-describedby="basic-addon1">
      </div>
    </form>
  </div>
</div>

Я надеюсь, что это поможет вам!

0
Bhuwan 10 Янв 2018 в 11:28