Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Style Google Custom Search Manually using CSS?
Google Custom Search Engine (GCSE) allows you to integrate Google's powerful search functionality into your website. While Google provides default styling, you can customize the appearance using CSS to match your site's design.
Syntax
.gsc-control {
/* Styles for the main search container */
}
.gsc-input-box {
/* Styles for the search input wrapper */
}
#gsc-i-id1 {
/* Styles for the search input field */
}
.gsc-search-button-v2 {
/* Styles for the search button */
}
Setting Up Google Custom Search
Prerequisites: Create a Google Custom Search Engine at Google Programmable Search Engine and obtain your search engine ID.
The basic integration code from Google looks like this
<script async src="https://cse.google.com/cse.js?cx=YOUR_SEARCH_ENGINE_ID"></script> <div class="gcse-search"></div>
Example: Custom Styled Google Search
The following example demonstrates how to style the Google Custom Search with custom CSS and JavaScript to change placeholder text
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 2rem;
background-color: #f5f5f5;
}
.search-container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
/* Main search control container */
.gsc-control {
font-family: Arial, sans-serif !important;
background-color: #ffffff !important;
border-radius: 25px !important;
padding: 10px 20px !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
border: none !important;
}
/* Search input wrapper */
.gsc-input-box {
border: 2px solid #4285f4 !important;
background: #fff !important;
border-radius: 20px !important;
padding: 5px 15px !important;
}
/* Search input field */
#gsc-i-id1 {
color: #333 !important;
font-size: 16px !important;
background: transparent !important;
line-height: 1.4 !important;
}
/* Search button */
.gsc-search-button-v2 {
background-color: #4285f4 !important;
border-radius: 50% !important;
padding: 8px !important;
cursor: pointer !important;
border: none !important;
}
.gsc-search-button-v2:hover {
background-color: #3367d6 !important;
}
</style>
</head>
<body>
<div class="search-container">
<h2>Custom Styled Google Search</h2>
<p>Search anything using our custom styled search box</p>
<!-- Replace YOUR_SEARCH_ENGINE_ID with actual ID -->
<script async src="https://cse.google.com/cse.js?cx=YOUR_SEARCH_ENGINE_ID"></script>
<div class="gcse-search"></div>
</div>
<script>
window.onload = function() {
// Wait for Google CSE to load
setTimeout(function() {
var searchBox = document.querySelector("#gsc-i-id1");
var searchButton = document.querySelector(".gsc-search-button-v2");
if (searchBox) {
searchBox.placeholder = "Search tutorials and guides...";
searchBox.title = "Enter your search terms";
}
if (searchButton) {
searchButton.title = "Search";
}
}, 1000);
}
</script>
</body>
</html>
A centered search box with blue border, rounded corners, and custom placeholder text appears. The search button is styled as a blue circle that changes color on hover.
Key CSS Classes for Styling
| CSS Class | Description |
|---|---|
.gsc-control |
Main container for the entire search widget |
.gsc-input-box |
Container for the search input field |
#gsc-i-id1 |
The actual search input field |
.gsc-search-button-v2 |
The search submit button |
.gsc-results |
Container for search results |
Best Practices
Use !important declarations to override Google's default styles, ensure the search widget loads before applying JavaScript modifications, and test your styling across different browsers for consistent appearance.
Conclusion
Styling Google Custom Search requires targeting specific CSS classes with !important declarations. Combine CSS styling with JavaScript to fully customize the search experience and match your website's design.
1K+ Views
