Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

restyle google custom search box appearance in HTML

Posted on 2014-10-28
2
Medium Priority
?
717 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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

577 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