js中input框右侧的叉隐藏

隐藏input框右侧的叉可以通过设置input元素的type属性为text，
然后利用CSS的伪类选择器::before或者::after在input元素的右侧添加一个叉的样式。然后设置该伪类元素的display属性为none即可隐藏。

具体的步骤如下：
1. 在HTML中，创建一个input元素，并设置其type属性为text。

<input type="text" id="inputBox">

2. 在CSS中，使用伪类选择器在input元素的右侧添加一个叉的样式，并设置其display为none。

#inputBox::after {
   content: '×';   /* 添加×字符作为叉的样式 */
   color: red;  /* 设置叉的颜色 */
   margin-left: 5px;  /* 叉与输入框之间的间距 */
   display: none;   /* 隐藏叉 */
}

3. 使用JavaScript来实现当input框中有内容时显示叉，无内容时隐藏叉的效果。

var inputBox = document.getElementById('inputBox');
inputBox.addEventListener('input', function() {
   if (inputBox.value.length > 0) {
      inputBox.style.setProperty('--input-icon-display', 'block');   /* 显示叉 */
   } else {
      inputBox.style.setProperty('--input-icon-display', 'none');   /* 隐藏叉 */
   }
});

4. 最后，在CSS中使用CSS变量来控制叉的显示或隐藏。

#inputBox::after {
   /* ... */
   display: var(--input-icon-display);   /* 使用CSS变量控制叉的显示或隐藏 */
}

这样就可以实现在input框右侧的叉隐藏的效果。