支持的 CSS 类
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
您可以更改搜索微件的样式,使其与您的应用相匹配。使用
以下 CSS 类来自定义 widget。
建议
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 |
|
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-25。
[null,null,["最后更新时间 (UTC):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` | |"]]