css - @media 查询问题。专注于输入元素时显示的隐藏图像

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