SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Coloring Google's Search Field

    Sitepoint Members,
    The submit button below does have a blue background with white letters. I've been trying to get the field for the text blue and the text being typed white and I can't get it to those colors.

    <form action="http://www......searchresults.html" id="cse-search-box">
    <div><input type="hidden" name="cx" value="009478971803505951972:l1rvmz2xync" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="44" title="Enter Terms" />
    <input class="submit" type="submit" name="sa" value="Submit" /></div></form>
    <script type="text/javascript"
    src="http://www.google.com/coop/cse/brand?form=cse-search-box&#038;lang=en"></script>

    The last <input> is the submit button.
    The second to last <input> is the field for typing in your search terms.

    CSS:
    input.submit{background-color:#3f3f7f;color:#fff}

    I tried changing
    <input type="text" name="q" size="44" title="Enter Terms" />
    To
    <input class="text" type="text" name="q" size="44" title="Enter Terms" />

    for CSS
    input.text{background-color:#3f3f7f;color:#fff}

    but it didn't work. Is it possible to change that google text field?

    Thanks,

    Chris

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Chris77 View Post
    I tried changing

    Code:
    <input type="text" name="q" size="44" title="Enter Terms" />
    to

    Code:
    <input class="text" type="text" name="q" size="44" title="Enter Terms" />
    for CSS

    Code:
    input.text{background-color:#3f3f7f;color:#fff}
    but it didn't work.
    It should work (it works for me). You might be better off using background: #3f3f7f rather than background-color: #3f3f7f. But apart from that, adding a class and those styles should do just what you want. Or you could also leave out the class and do

    Code:
    input[type="text"] {background:#3f3f7f;color:#fff}
    though that won't work on some older browsers.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ralph,
    I tried
    <input class="text" type="text" name="q" size="44" title="Enter Terms" />
    with
    input.text{background:#3f3f7f}

    and tried
    <input class="text" type="text" name="q" size="44" title="Enter Terms" />
    with
    input.text{background-color:#3f3f7f}

    and neither worked in just trying to get the background color to blue, forgetting the text.

    It looks like I'm going to have to leave it at
    <input class="text" type="text" name="q" size="44" title="Enter Terms" />
    with
    input.text{color:#3f3f7f}

    Thanks,

    Chris

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Ralph,
    I tried
    <input class="text" type="text" name="q" size="44" title="Enter Terms" />
    with
    input.text{background:#3f3f7f}

    and tried
    <input class="text" type="text" name="q" size="44" title="Enter Terms" />
    with
    input.text{background-color:#3f3f7f}

    and neither worked in just trying to get the background color to blue, forgetting the text.

    It looks like I'm going to have to leave it at
    <input class="text" type="text" name="q" size="44" title="Enter Terms" />
    with
    input.text{color:#3f3f7f}

    Thanks,

    Chris
    That's the most basic of CSS and it should work. Could you provide us with the full code with it not working? It's most likely just some silly error (probably validation) taht's causing it to not work .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ryan,
    Search Form/box:
    <form action="http .....searchrez.html" id="cse-search-box">
    <div><input type="hidden" name="cx" value="009478971803505951972:l1rvmz2jjyy" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input class="text" type="text" name="q" size="44" title="Enter Terms" />
    <input class="submit" type="submit" name="sa" value="Search" /></div></form>
    <script type="text/javascript"
    src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

    Here's the results Form/box
    <div id="cse-search-results"></div>
    <script type="text/javascript">
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 595;
    var googleSearchDomain = "www.google.com";
    var googleSearchPath = "/cse"
    </script>
    <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>


    You know, I noticed that I don't have anything in my css for id="cse-search-box"

    Thanks,

    Chris

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The JavaScript is pulling in a default Google style that is overriding your CSS:

    Code:
    <input type="text" title="Enter Terms" size="44" name="q" class="text" style="background: url(&quot;http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif&quot;) no-repeat scroll left center rgb(255, 255, 255);">
    You could override it with this

    Code:
    input.text{background: #3f3f7f !important;color:#fff !important;}
    but then there's not real point in using the JS in the first place.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ralph,
    Any idea what cse-search-box is for?

    Thanks,

    Chris

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Any idea what cse-search-box is for?
    It's a hook for the JavaScript code that the Google link pulls in. That little bit of JS pulls in a ton of stuff that searches the form for that id so it knows what to operate on.

    Code:
    (function() {
    var f = document.getElementById('cse-search-box'); 
    
    etc...
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Being an educated guess, I'd guess all the results gets put into that element. Though I'd need to see the site online to have a better idea of what it's used for (my guess is based off the limited Javascript code provided) .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    my guess is based off the limited Javascript code provided
    The code provided is all that's needed. If you run it in your browser, it pulls in JS code from Google that places a Google logo image in the search box and colors the input white. !important overrides that, but basically kills the point of having the JS in the first place, too (as far as I can see).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah but id="cse-search-box" is html asking for css and I have no css for the html. Are you saying the css is at google?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Chris77 View Post
    Yeah but id="cse-search-box" is html asking for css and I have no css for the html. Are you saying the css is at google?
    IDs are for JS as well as CSS, and the JS needs the id to know what element to look for. But yes, Google's code also adds some CSS in there as well. It's all pulled in from Google by the JS.

    The Google CSS looks like this:

    Code:
    element.style {
        background: url("http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif") no-repeat scroll left center #FFFFFF;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    633
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ok.

    Thanks Ralph


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •