Solved

restyle google custom search box appearance in HTML

Posted on 2014-10-28
2
550 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now