在搜索文本框中的悬停关闭图标上显示指针

Question

我在我的应用程序中使用输入类型搜索。我想在用户鼠标悬停在搜索框中的x图标上时显示cursor:pointer，我试图找到css，但没有找到任何相关内容。

＆＃13;

＆＃13;

<input type="search">

＆＃13;

＆＃13;

＆＃13;

Answer 1

这样的事情可能有用吗？

＆＃13;

＆＃13;

  input[type="search"]::-webkit-search-decoration:hover,
    input[type="search"]::-webkit-search-cancel-button:hover { 
        cursor:pointer; 
    }

＆＃13;

<input type="search">

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用::-webkit-search-cancel-button选择器并在其上设置cursor: pointer;。

注意：这仅适用于Chrome和Safari。有关详细信息，请参阅MDN。

input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

<input type="search">

Answer 3

要在输入中放置X图标，可以这样做：

＆＃13;

＆＃13;

.input-container {
  border: 1px solid #DDD;
}

.x-icon {
  float: right;
}

.x-icon:hover {
  cursor: pointer;
}

＆＃13;

<div class="input-container">
  <span class="x-icon">X</span>
  <input style="border: none;">
</div>

＆＃13;

＆＃13;

＆＃13;

您可以在那里查看此解决方案：https://codepen.io/Czeran/pen/jGQRLm

Answer 4

如果您对span输入类型的当前浏览器支持不满意，则可以使用常规x输入创建相同的功能，将search个元素创建为$('.inputField input').on('input', function() { var span = $(this).next('span'); span.toggle($(this).val().length != 0) }) $('.inputField').on('click', 'span', function() { $(this).prev('input').val('') $(this).hide() })按钮。< / p>

.inputField {
  position: relative;
  display: inline-block;
}

.inputField input {
  padding-right: 20px;
}

.inputField span {
  transform: translateY(-50%);
  display: none;
  position: absolute;
  right: 5px;
  font-size: 12px;
  cursor: pointer;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputField">
  <input type="text">
  <span>X</span>
</div>

pip uninstall nltk