在输入焦点上隐藏 html 中的图标不起作用

Question

我试图在输入框获得焦点时隐藏输入框上的图标，我的代码如下所示：

.errspan {
  top:37px;
  left: 35px;
        float: left;
        position: relative;
        z-index: 5;
        color: #f2136e;
        font-size: 18px;
    }
.samaraveera:focus + .errspan {display: none;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span class="fa fa-phone errspan"></span>
      <input class="samaraveera" type="text" >

这不是让我的图标在输入框获得焦点时隐藏，谁能告诉我为什么会这样？提前致谢

Answer 1

您可以 Javascript 并执行：if (document.getElementById("InputId").selected == true){document.getElementById("photoId").style.opacity = "0.0"}就是这样。

有问题可以问我。

Answer 2

你正在尝试根据你的代码将 .errspan 样式直接放在输入的后面，并查看你的 DOM 代码，span 在输入的前面，

在下面的代码片段中，我将跨度放在输入下方，您的代码工作正常:)

.errspan {
  top:37px;
  left: 35px;
        float: left;
        position: relative;
        z-index: 5;
        color: #f2136e;
        font-size: 18px;
    }
.samaraveera:focus + .errspan {display: none;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input class="samaraveera" type="text" >
<span class="fa fa-phone errspan"></span>

有关 + 运算符的更多信息：w3schools

在输入焦点上隐藏 html 中的图标不起作用

hiding icon in html on input focus not working

html

javascript

css

focus

input