Ich verwende eine Eingabe Typ Suche in meiner Anwendung. Ich möchte cursor:pointer anzeigen, wenn Benutzer mit der Maus auf x-Symbol im Suchfeld schweben, ich habe versucht, herauszufinden, CSS dafür, aber nichts zu diesem Thema finden.Anzeige Zeiger auf Hover schließen Symbol in der Suche Textfeld
<input type="search">Vielleicht so etwas funktionieren kann?
input[type="search"]::-webkit-search-decoration:hover,
input[type="search"]::-webkit-search-cancel-button:hover {
cursor:pointer;
}<input type="search">Um X-Symbol in der Eingabe zu platzieren u diesen Trick tun können:
.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>Sie diese Lösung es überprüfen: https://codepen.io/Czeran/pen/jGQRLm
Ich will nicht so –
Verwenden Sie den ::-webkit-search-cancel-button Selektor und stellen Sie einen cursor: pointer; darauf ein.
HINWEIS: Dies funktioniert nur für Chrom und Safari. Weitere Informationen finden Sie unter MDN.
input[type="search"]::-webkit-search-cancel-button {
cursor: pointer;
}<input type="search">können Sie gleiche Funktionalität erstellen mit regelmäßigen text Eingang und einem span Element als x Taste, wenn Sie mit search Typ Eingang Unterstützung aktueller Browser nicht zufrieden sind.
$('.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>
Willkommen auf Stack-Überlauf, sollte Ihre Frage enthalten [a Minimal, Complete, und prüfbare Beispiel] (https://stackoverflow.com/help/mcve). – hungerstar
Welchen Browser benutzen Sie? Dies könnte eine browserspezifische Funktion für Texteingaben sein, mit der der Benutzer das Feld leeren kann, indem er darauf klickt. Ich würde nach browserspezifischen CSS-Stilen suchen. Aber es könnte nicht möglich sein, dies zu stylen. – o01
@ o01, verwende ich einen Chrom - Browser –