کلاس های CSS پشتیبانی شده
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
می توانید سبک ویجت جستجو را برای مطابقت با برنامه خود تغییر دهید. از کلاس های CSS زیر برای سفارشی کردن ویجت استفاده کنید.
پیشنهادات
نمونه ساختار DOM:
<div class="cloudsearch_suggestion_container">
<img src="..." class="cloudsearch_suggestion_suggested_query_icon">
<span class="cloudsearch_suggestion_suggested_query">...</span>
</div>
| کلاس CSS | یادداشت ها |
|---|
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 | |
نتایج
نمونه ساختار 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>
| کلاس CSS | یادداشت ها |
|---|
cloudsearch_result_container | |
cloudsearch_result_icon | |
cloudsearch_result_title | |
cloudsearch_result_snippet | |
cloudsearch_result_metadata | |
وجوه
نمونه ساختار 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>
| کلاس CSS | یادداشت ها |
|---|
cloudsearch_facet_bucket_clickable | عنصری را نشان می دهد که انتخاب فیلتر را تغییر می دهد |
cloudsearch_facet_bucket_selected | در صورت انتخاب فیلتر، در cloudsearch_facet_bucket_container ارائه شود |
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 | |
نمونه ساختار 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>
| کلاس CSS | یادداشت ها |
|---|
cloudsearch_pagination_container | |
cloudsearch_pagination_center | |
cloudsearch_pagination_icon | |
cloudsearch_pagination_icon_first | |
cloudsearch_pagination_icon_previous | |
cloudsearch_pagination_icon_next | |
cloudsearch_pagination_text | |
نتیجه به حساب می آید
<div class="cloudsearch_result_count_container">
<span class="cloudsearch_result_count_text">...</span>
</div>
| کلاس CSS | یادداشت ها |
|---|
cloudsearch_result_count_container | |
cloudsearch_result_count_text | |
درخواست ورود به سیستم
نمونه ساختار DOM:
<div class="cloudsearch_sign_in_container">
<div class="cloudsearch_sign_in_button">...</div>
<div class="cloudsearch_sign_in_text">...</div>
</div>
| کلاس CSS | یادداشت ها |
|---|
cloudsearch_sign_in_container | |
cloudsearch_sign_in_button | |
cloudsearch_sign_in_text | |
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2025-07-25 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-07-25 بهوقت ساعت هماهنگ جهانی."],[],[],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` | |"]]
