Solved

restyle google custom search box appearance in HTML

Posted on 2014-10-28
2
609 Views
Last Modified: 2014-10-28
I am looking for help in restyling the appearance of the Google Custom Search Engine search box.  I want to change the Search box shape and transparency in HTML/CSS.
0
Comment
Question by:eanmd
2 Comments
 
LVL 17

Accepted Solution

by:
selvol earned 500 total points
ID: 40407851
Add this to your page after the search box code..   Change the number values to suite your needs.

The class name is .gsc-search-box

This part " !important" is important.

<style type="text/css">
.gsc-search-box {border: 2px solid !important;
    border-radius: 25px !important;
    opacity: 0.5 !important;

}</style>

Open in new window



Selvol
Here some more of the css.

 input.gsc-search-button { margin-left : 2px; } div.gsc-clear-button { display : inline; text-align : right; margin-left : 4px; margin-right : 4px; padding-left : 10px; background-repeat: no-repeat; background-position: center center; background-image: url('//www.google.com/uds/css/clear.gif'); cursor : pointer; } .gsc-search-box-tools .gsc-clear-button { display: none; } .gsc-results-close-btn { background-image: url("//www.google.com/images/nav_logo114.png"); background-repeat: no-repeat; background-position: -140px -230px; float: right; display: none; opacity: 0; height: 12px; width: 12px; position: absolute !important; top: 20px; right: 20px; cursor: pointer; }

Open in new window


Here's a link to some of the css used.

https://github.com/dvidsilva/memegusta1/blob/master/template/search.html
0
 

Author Closing Comment

by:eanmd
ID: 40409332
Great Solution - Exactly what I needed - Thanks for the Help ! :-)
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP.NET Identity - Support Individual accounts and on-premises AD 1 77
CSS HELP 6 91
Create associate webpages / websites 3 91
Create animated movies for web page 18 86
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question