?
Solved

restyle google custom search box appearance in HTML

Posted on 2014-10-28
2
Medium Priority
?
669 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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

777 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