J'utilise une recherche de type d'entrée dans mon application. Je veux afficher cursor:pointer lorsque la souris de l'utilisateur survoler l'icône x dans la boîte de recherche, j'ai essayé de trouver css pour cela, mais ne trouve rien à relier à cela.afficher pointeur sur hover fermer icône dans le champ de recherche
<input type="search">Peut-être quelque chose comme ça peut fonctionner?
input[type="search"]::-webkit-search-decoration:hover,
input[type="search"]::-webkit-search-cancel-button:hover {
cursor:pointer;
}<input type="search">Pour placer l'icône X en entrée u peut faire cette astuce:
.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>Vous pouvez vérifier cette solution là: https://codepen.io/Czeran/pen/jGQRLm
je ne veux pas comme ça –
Utilisez le sélecteur ::-webkit-search-cancel-button et définissez un cursor: pointer; dessus.
NOTE: Ceci ne fonctionne que pour le chrome et le safari. Voir MDN pour plus d'informations.
input[type="search"]::-webkit-search-cancel-button {
cursor: pointer;
}<input type="search">Vous pouvez créer même fonctionnalité avec l'entrée régulière text et un élément span comme bouton x si vous n'êtes pas satisfait avec le soutien du navigateur du type d'entrée 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>
Bienvenue sur Stack Overflow, votre question devrait contenir [un exemple minimal, complet et Vérifiable] (https://stackoverflow.com/help/mcve). – hungerstar
Quel navigateur utilisez-vous? Peut être une fonctionnalité spécifique au navigateur sur les entrées de texte qui permet à l'utilisateur de vider le champ en cliquant dessus. Je rechercherais des styles CSS spécifiques au navigateur. Mais il pourrait ne pas être possible de le faire. – o01
@ o01, j'utilise un navigateur chrome –