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

Question

我在我的应用程序中使用输入类型搜索。我想当用户鼠标悬停在搜索框中的 x 图标上时显示

cursor:pointer

，我尝试查找为此的 css，但没有找到与此相关的任何内容。

<input type="search">

Answer 1

也许这样的东西可以工作？

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

<input type="search">

Answer 2

使用

::-webkit-search-cancel-button

选择器并在其上设置

cursor: pointer;

。

注意：这在 FireFox 中不起作用

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

<input type="search">

Answer 3

要在输入中放置 X 图标，您可以执行此技巧：

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

.x-icon {
  float: right;
}

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

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

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

Answer 4

如果您对当前浏览器对

text

输入类型的支持不满意，可以使用常规

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

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