css 如何使标签的一部分不连接到其输入?

eqoofvh9  于 2023-03-05  发布在  其他
关注(0)|答案(1)|浏览(121)

我有一个基本的输入和标签:https://codepen.io/agrawalishaan/pen/QWBxBdK

span {
  border: 1px solid red;
}
<label for="myInput">
  I am a label! <span>icon</span>
</label>
<input id="myInput"/>

当我点击标签时,光标设置在输入内部,这是可取的。
我的标签还包含一个信息图标。当我悬停在该图标上时,会出现一个弹出窗口(所以我需要hover才能工作)。
在移动设备上,没有悬停,而是需要点击。但是当我点击这个图标时,弹出窗口都出现了,输入也被选中了,当我只点击这个图标时,我如何禁用输入选择呢?

ahy6op9u

ahy6op9u1#

我添加了一些javascript,它使用event.preventDefault()方法来确保在单击图标时输入不会被聚焦。

const infoIcon = document.querySelector('.info-icon');
const popup = document.querySelector('#popup');

infoIcon.addEventListener('click', function(event) {
  event.preventDefault(); // prevent default behavior of focusing on the input
  
//toggles the popup on click/touch of the icon
popup.style.display = popup.style.display === 'none' ? 'block' : 'none' 
});
span {
  border: 1px solid red;
}

#popup {
   position:absolute;
   display:none;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:yellow;
}

.info-icon:hover + #popup { /*uses the '+' adjacent child selector to display popup on hover*/
  display: block;
}
<label for="myInput">
  I am a label! <span class="info-icon">icon</span>
  <div id='popup'>POP UP</div>
</label>
<input id="myInput"/>

相关问题