懸停時顯示指針在搜索文本框中關閉圖標

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

要放置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

Answer 3

使用::-webkit-search-cancel-button選擇器並在其上設置一個cursor: pointer;。

注意：這隻適用於鉻和safari。有關更多信息，請參閱MDN。

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

<input type="search">

Answer 4

，如果你不滿意目前的瀏覽器支持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>