Question

我有带登录视图的MVC 5应用程序。

登录视图的核心部分如下所示：

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

正如您所看到的，问题是图像消失了。

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

我希望这会对你有所帮助！

如果输入框有图像，如何摆脱Chrome的黄色自动填充背景？

1 个答案: