@媒体查询问题。当焦点集中在输入元素时显示隐藏图像

Question

不确定是否有人能在这里帮助我，但我对媒体查询有一些问题。因此，我设置了一个表单，并使用css中的媒体查询将其显示在我的手机上。一切看起来都是它应该和工作的方式，但是当我选择手机上的输入元素时，它会显示隐藏的图像。默认情况下，当页面被加载时，它不会显示隐藏的图像，这是它应该工作的方式，但是在单击要登录的输入元素之后，我会看到表单中的图像。对于我做错了什么有什么建议吗？

@media screen and (max-width: 480px) and (orientation: portrait){
.login-lock-ico{display: none!important;
 }
}

html：

<form id="login_form" action="index.php" method="POST">
<div class="login-conntainer">
  <div class="login-lock-ico">
    <img src="images/login/lock.png" alt="login lock"/>
   </div>

<div class="login-form">
  <div class="login-txt">User Login</div>

    <div class="login-control">
      <input class="login-input" type="text" name="login" placeholder="Username"/>
  </div>

<div class="login-control">
  <input class="login-input" type="password" name="password" placeholder="Password"/>
   </div>

<div class="login-control">
<input id="rememner_me" type="checkbox" class="css-checkbox" name="remember_me_opt" value="">
<label for="rememner_me" name="cust_email_label" class="css-label">&nbsp;Remember Me</label> 
</div>  
 </div>
   </div>
       </form>

我还调整了我的浏览器的移动宽度，它确实正确地显示。只是在物理电话上有问题。

Answer 1

理想情况下，这在输入焦点上是不可见的，但是您可以尝试下面的一个选项：

@media only screen and (max-width: 480px) and (orientation: portrait){
.login-lock-ico{display: none!important; height:1px; overflow:hidden}
}