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

问题描述：

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

<input type="search">

欢迎堆栈溢出，你的问题应该包含[一个最小的，完整的和可验证的示例]（https://stackoverflow.com/help/mcve）。 – hungerstar

你使用什么浏览器？可能是文本输入的特定于浏览器的功能，可让用户通过点击来清空该字段。我会搜索特定于浏览器的CSS样式。但是这可能不可能。 – o01

@ o01，我使用的是Chrome浏览器 –

答

也许这样的事情可以工作？

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

<input type="search">

答

要放置X图标中输入u能做到这招：

.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

我不想这样 –

答

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

注意：这只适用于铬和safari。有关更多信息，请参阅MDN。

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

<input type="search">

答

，如果你不满意目前的浏览器支持search输入型的，您可以创建定期text输入和x按钮一个span元素相同的功能。

$('.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>

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

相关推荐