我有一个登录表单,浏览器已经保存了用户登录详细信息。因此,当我在浏览器中打开此页面时,它会像这样显示
但当我点击页面或按下任何按钮时,
的这是预期的默认行为。我已经尝试
document.body.focus()
字符串onload但这不起作用。然后我将焦点放在其中一个输入上(名字上),但其他字段呢?对此最好的解决方案是什么?我知道这个花哨的造型是不好的,但有解决办法吗?
onload
qmelpv7a1#
我在使用React和样式化组件时遇到了这个问题。为了解决这个问题,我在我的样式化组件中使用了以下css(这是一个<label>):input:-webkit-autofill + &个它的工作原理是检查输入中是否有自动填充,如果为true,则应用我们想要的样式。注意:您可能需要将&替换为input。
<label>
input:-webkit-autofill + &
&
input
abithluo2#
试试这个
.login-form{ width: 50%; } form div{ padding: 10px; } form div label, form div .fa{ color: blue; }
个字符
bxpogfeg3#
您需要在Login表单的元素中添加activeclass:举例来说:第一个月或者将下面的代码片段添加到css中:
input:-webkit-autofill { +label { @extend .active; } } }`
字符串让我知道如果它工作,谢谢。
xqk2d5yq4#
$(window).on('load', function (){ setTimeout(function() { $('input:-webkit-autofill').each(function (){ $(this).parent().addClass('focused'); }); }, 500); });
.form-group.focused .floating-label { color: #7b7f82; font-size: 12px; left: 14px; opacity: 1; top: 8px; }
<div class="form-group floating-group"> <label class="floating-label">tel</label> <input type="text" name="telefon" id="telefon"> </div>
4条答案
按热度按时间qmelpv7a1#
我在使用React和样式化组件时遇到了这个问题。为了解决这个问题,我在我的样式化组件中使用了以下css(这是一个
<label>
):input:-webkit-autofill + &
个它的工作原理是检查输入中是否有自动填充,如果为true,则应用我们想要的样式。
注意:您可能需要将
&
替换为input
。abithluo2#
试试这个
个字符
bxpogfeg3#
您需要在Login表单的元素中添加activeclass:
举例来说:
第一个月
或者将下面的代码片段添加到css中:
字符串
让我知道如果它工作,谢谢。
xqk2d5yq4#