Invia feedback
Classi CSS supportate
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Puoi cambiare lo stile del widget di ricerca in base alla tua applicazione. Utilizza le funzionalità di
le seguenti classi CSS per personalizzare il widget.
Suggerimenti
Esempio di struttura DOM:
<div class="cloudsearch_suggestion_container">
<img src="..." class="cloudsearch_suggestion_suggested_query_icon">
<span class="cloudsearch_suggestion_suggested_query">...</span>
</div>
Classe CSS
Note
cloudsearch_suggestion_overlay
cloudsearch_suggestion_container
cloudsearch_suggestion_suggested_query
cloudsearch_suggestion_suggested_query_icon
cloudsearch_suggestion_suggested_people_name
cloudsearch_suggestion_suggested_people_profile_image
Risultati
Esempio di struttura DOM:
<div class="cloudsearch_result_container">
<span class="cloudsearch_result_icon"></span>
<div class="cloudsearch_result_title">
<a href="...">...</a>
</div>
<div class="cloudsearch_result_metadata">...</div>
<div class="cloudsearch_result_snippet">...</div>
</div>
Classe CSS
Note
cloudsearch_result_container
cloudsearch_result_icon
cloudsearch_result_title
cloudsearch_result_snippet
cloudsearch_result_metadata
Facet
Esempio di struttura DOM:
<div class = "cloudsearch_facet_result_container" >
<div class = "cloudsearch_facet_operator_container" >
<span class = "cloudsearch_facet_result_operator_name" >...</ span >
</ div >
<div class = "cloudsearch_facet_bucket_container" >
<input type = "checkbox" value = "value"
class = "cloudsearch_facet_bucket_checkbox cloudsearch_facet_bucket_clickable" >
<span class = "cloudsearch_facet_bucket_value" >...</ span >
<span class = "cloudsearch_facet_bucket_percentage" >...</ span >
</ div >
</ div >
Classe CSS
Note
cloudsearch_facet_bucket_clickableIndica un elemento che attiva/disattiva la selezione del filtro
cloudsearch_facet_bucket_selectedPresenta su cloudsearch_facet_bucket_container se è selezionato un filtro
cloudsearch_facet_bucket_container
cloudsearch_facet_result_container
cloudsearch_facet_operator_container
cloudsearch_facet_result_operator_name
cloudsearch_facet_bucket_value
cloudsearch_facet_bucket_percentage
Esempio di struttura DOM:
<div class="cloudsearch_pagination_container">
<div class="cloudsearch_pagination_center">
<span class="cloudsearch_pagination_icon cloudsearch_pagination_icon_previous">
</span>
<span class="cloudsearch_pagination_text">...</span>
<span class="cloudsearch_pagination_icon cloudsearch_pagination_icon_next">
</span>
</div>
</div>
Classe CSS
Note
cloudsearch_pagination_container
cloudsearch_pagination_center
cloudsearch_pagination_icon
cloudsearch_pagination_icon_first
cloudsearch_pagination_icon_previous
cloudsearch_pagination_icon_next
cloudsearch_pagination_text
Conteggio dei risultati
<div class = "cloudsearch_result_count_container" >
<span class = "cloudsearch_result_count_text" >...</ span >
</ div >
Classe CSS
Note
cloudsearch_result_count_container
cloudsearch_result_count_text
Richiesta di accesso
Esempio di struttura DOM:
<div class="cloudsearch_sign_in_container">
<div class="cloudsearch_sign_in_button">...</div>
<div class="cloudsearch_sign_in_text">...</div>
</div>
Classe CSS
Note
cloudsearch_sign_in_container
cloudsearch_sign_in_button
cloudsearch_sign_in_text
Invia feedback
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0 , mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0 . Per ulteriori dettagli, consulta le norme del sito di Google Developers . Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2025-07-25 UTC.
Vuoi dirci altro?
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-25 UTC."],[],[],null,["# Supported CSS classes\n\nYou can change the style of the search widget to match your application. Use\nthe following CSS classes to customize the widget.\n\nSuggestions\n-----------\n\nSample DOM structure: \n\n \u003cdiv class=\"cloudsearch_suggestion_container\"\u003e\n \u003cimg src=\"...\" class=\"cloudsearch_suggestion_suggested_query_icon\"\u003e\n \u003cspan class=\"cloudsearch_suggestion_suggested_query\"\u003e...\u003c/span\u003e\n \u003c/div\u003e\n\n| CSS Class | Notes |\n|---------------------------------------------------------|-------|\n| `cloudsearch_suggestion_overlay` | |\n| `cloudsearch_suggestion_container` | |\n| `cloudsearch_suggestion_suggested_query` | |\n| `cloudsearch_suggestion_suggested_query_icon` | |\n| `cloudsearch_suggestion_suggested_people_name` | |\n| `cloudsearch_suggestion_suggested_people_profile_image` | |\n\nResults\n-------\n\nSample DOM structure: \n\n \u003cdiv class=\"cloudsearch_result_container\"\u003e\n \u003cspan class=\"cloudsearch_result_icon\"\u003e\u003c/span\u003e\n \u003cdiv class=\"cloudsearch_result_title\"\u003e\n \u003ca href=\"...\"\u003e...\u003c/a\u003e\n \u003c/div\u003e\n \u003cdiv class=\"cloudsearch_result_metadata\"\u003e...\u003c/div\u003e\n \u003cdiv class=\"cloudsearch_result_snippet\"\u003e...\u003c/div\u003e\n \u003c/div\u003e\n\n| CSS Class | Notes |\n|--------------------------------|-------|\n| `cloudsearch_result_container` | |\n| `cloudsearch_result_icon` | |\n| `cloudsearch_result_title` | |\n| `cloudsearch_result_snippet` | |\n| `cloudsearch_result_metadata` | |\n\nFacets\n------\n\nSample DOM structure: \n\n \u003cdiv class=\"cloudsearch_facet_result_container\"\u003e\n \u003cdiv class=\"cloudsearch_facet_operator_container\"\u003e\n \u003cspan class=\"cloudsearch_facet_result_operator_name\"\u003e...\u003c/span\u003e\n \u003c/div\u003e\n \u003cdiv class=\"cloudsearch_facet_bucket_container\"\u003e\n \u003cinput type=\"checkbox\" value=\"value\"\n class=\"cloudsearch_facet_bucket_checkbox cloudsearch_facet_bucket_clickable\"\u003e\n \u003cspan class=\"cloudsearch_facet_bucket_value\"\u003e...\u003c/span\u003e\n \u003cspan class=\"cloudsearch_facet_bucket_percentage\"\u003e...\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n| CSS Class | Notes |\n|------------------------------------------|-----------------------------------------------------------------------|\n| `cloudsearch_facet_bucket_clickable` | Indicates an element that toggles the selection of the filter |\n| `cloudsearch_facet_bucket_selected` | Present on cloudsearch_facet_bucket_container if a filter is selected |\n| `cloudsearch_facet_bucket_container` | |\n| `cloudsearch_facet_result_container` | |\n| `cloudsearch_facet_operator_container` | |\n| `cloudsearch_facet_result_operator_name` | |\n| `cloudsearch_facet_bucket_value` | |\n| `cloudsearch_facet_bucket_percentage` | |\n\nPagination\n----------\n\nSample DOM structure: \n\n \u003cdiv class=\"cloudsearch_pagination_container\"\u003e\n \u003cdiv class=\"cloudsearch_pagination_center\"\u003e\n \u003cspan class=\"cloudsearch_pagination_icon cloudsearch_pagination_icon_previous\"\u003e\n \u003c/span\u003e\n \u003cspan class=\"cloudsearch_pagination_text\"\u003e...\u003c/span\u003e\n \u003cspan class=\"cloudsearch_pagination_icon cloudsearch_pagination_icon_next\"\u003e\n \u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n\n| CSS Class | Notes |\n|----------------------------------------|-------|\n| `cloudsearch_pagination_container` | |\n| `cloudsearch_pagination_center` | |\n| `cloudsearch_pagination_icon` | |\n| `cloudsearch_pagination_icon_first` | |\n| `cloudsearch_pagination_icon_previous` | |\n| `cloudsearch_pagination_icon_next` | |\n| `cloudsearch_pagination_text` | |\n\nResult counts\n-------------\n\n \u003cdiv class=\"cloudsearch_result_count_container\"\u003e\n \u003cspan class=\"cloudsearch_result_count_text\"\u003e...\u003c/span\u003e\n \u003c/div\u003e\n\n| CSS Class | Notes |\n|--------------------------------------|-------|\n| `cloudsearch_result_count_container` | |\n| `cloudsearch_result_count_text` | |\n\nSign-in prompt\n--------------\n\nSample DOM structure: \n\n \u003cdiv class=\"cloudsearch_sign_in_container\"\u003e\n \u003cdiv class=\"cloudsearch_sign_in_button\"\u003e...\u003c/div\u003e\n \u003cdiv class=\"cloudsearch_sign_in_text\"\u003e...\u003c/div\u003e\n \u003c/div\u003e\n\n| CSS Class | Notes |\n|---------------------------------|-------|\n| `cloudsearch_sign_in_container` | |\n| `cloudsearch_sign_in_button` | |\n| `cloudsearch_sign_in_text` | |"]]
