- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Mettere simbolo che cancella il testo nel campo di ricerca
-
Mettere simbolo che cancella il testo nel campo di ricerca
A volte vedo campi di ricerca che hanno una X in alto a destra dove c'è la freccia, cliccando sul simbolo si cancella il testo digitato, come si fa a mettere questo simbolo?
-
Ciao,
usa il tag input di tipo search
[HTML]
<input type="search">
[/HTML]
-
È già cosi.
-
Quindi hai già risolto
-
No.
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <label> <span class="screen-reader-text"><?php echo esc_html_x( 'Search for:', 'label', 'donovan' ); ?></span> <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'donovan' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'donovan' ); ?>" /> </label> <button type="submit" class="search-submit"> <?php echo donovan_get_svg( 'search' ); ?> <span class="screen-reader-text"><?php echo esc_html_x( 'Search', 'submit button', 'donovan' ); ?></span> </button> </form>
-
Allora non ho capito cosa vuoi ottenere.
Volevi mostrare una "X" nel campo di testo una volta digitato il campo? Quel codice è corretto.
In caso posta il link al sito.
-
@flaviors200 said:
Allora non ho capito cosa vuoi ottenere.
Volevi mostrare una "X" nel campo di testo una volta digitato il campo? Quel codice è corretto.
In caso posta il link al sito.
-
Ciao,
le regole nel foglio di stile https://albenessereblog.altervista.org/wp-content/themes/donovan/style.css?ver=5.4 nascondono la X
Se rimuovi questa regola si vede, però devi anche spostare il button del form verso destra perché copre il X
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
-
Ho visto, sto cercando il css.
-
Ora si tratta solo di mettere questo nel child ma eliminando il none, solo che non ci riesco
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
-
Sostituisci none con searchfield-cancel-button e risolvi.
Tema child = WP! Non ti saprei aiutare
Vedi se riesci tramite l'editor, ti basta anche inserire prima del tag di chiusura </head> il codice
[HTML]
<style>
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: searchfield-cancel-button;
}
</style>
[/HTML]
-
Il codice va bene a metà, come vedi mi mette il simbolo davanti e se digito ne mette uno anche dietro.
-
RISOLTO!
Ne ho tolto una parte:
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }