Geri bildirim gönderin
Desteklenen CSS sınıfları
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Arama widget'ının stilini uygulamanıza uyacak şekilde değiştirebilirsiniz. Tekliflerinizi otomatikleştirmek ve optimize etmek için
aşağıdaki CSS sınıflarını kullanın.
Öneriler
Örnek DOM yapısı:
<div class="cloudsearch_suggestion_container">
<img src="..." class="cloudsearch_suggestion_suggested_query_icon">
<span class="cloudsearch_suggestion_suggested_query">...</span>
</div>
CSS Sınıfı
Notlar
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
Sonuçlar
Örnek DOM yapısı:
<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>
CSS Sınıfı
Notlar
cloudsearch_result_container
cloudsearch_result_icon
cloudsearch_result_title
cloudsearch_result_snippet
cloudsearch_result_metadata
Özellikler
Örnek DOM yapısı:
<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 >
CSS Sınıfı
Notlar
cloudsearch_facet_bucket_clickableFiltre seçimini değiştiren bir öğeyi gösterir
cloudsearch_facet_bucket_selectedBir filtre seçilirse cloudsearch_facet_bucket_container üzerinde göster
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
Örnek DOM yapısı:
<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>
CSS Sınıfı
Notlar
cloudsearch_pagination_container
cloudsearch_pagination_center
cloudsearch_pagination_icon
cloudsearch_pagination_icon_first
cloudsearch_pagination_icon_previous
cloudsearch_pagination_icon_next
cloudsearch_pagination_text
Sonuç sayıları
<div class = "cloudsearch_result_count_container" >
<span class = "cloudsearch_result_count_text" >...</ span >
</ div >
CSS Sınıfı
Notlar
cloudsearch_result_count_container
cloudsearch_result_count_text
Oturum açma istemi
Örnek DOM yapısı:
<div class="cloudsearch_sign_in_container">
<div class="cloudsearch_sign_in_button">...</div>
<div class="cloudsearch_sign_in_text">...</div>
</div>
CSS Sınıfı
Notlar
cloudsearch_sign_in_container
cloudsearch_sign_in_button
cloudsearch_sign_in_text
Geri bildirim gönderin
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları 'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-25 UTC.
Bize geri bildirimde bulunmak mı istiyorsunuz?
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 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` | |"]]
