SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Any way to overwrite an input value="" with css?

    I know you can add a value with css with [ ] bit. But can I overwrite one? In which case I would need the ability to use !important. And I need to give it a background image.

    Google custom search is using the "Search" value in my input. In their demo though they use a search icon instead. I wish to use this icon instead. My attempt looks like this...

    input.gsc-search-button[value=""] {
    background:url(http://www.google.com/uds/css/v2/search_box_icon.png)
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I prefer to add the icon to the HTML:

    Code:
    <label for="q">Search this Site</label> 
    <input type="text" name="q" id="q"  value="Search">
    <input type="image" src="/images/search_box_icon.png" alt="Search">
    (You can just place the <label> off screen if you don't want it visible.)

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I dont have access to the html though

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    O, right. Well, I just downloaded their code for testing, and it shows the white icon on the blue background.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    O, right. Well, I just downloaded their code for testing, and it shows the white icon on the blue background.
    Thats so weird. I swore I saw it on my page before to. I tested multiple times by removing all the css that has to do with the search. I wonder what could be targeting that? Great - its one of those - where I stare at the screen for hows wondering what I'm missing.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Perhaps create a new test page and paste their code into that, to make sure you aren't going mad. If it has the white icon on a blue bg, you know something in your code is overriding it.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Man what the heck. I just removed all my css and still the search word is there. I don't have access to the html. All I do is input a small js snippet. On googles example page and as ralph sees the searcxh word is no where in site - only the png image. Where is this coming from? Got any guesses?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You can still use Firebug / Chrome dev tools etc. to see what HTML/CSS is pulled in by that JS code. You should be able to see immediately what styles are applying there.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Perhaps create a new test page and paste their code into that, to make sure you aren't going mad. If it has the white icon on a blue bg, you know something in your code is overriding it.
    Nope here is the test page with nothing but the js http://www.visibilityinherit.com/projects/test.png. The stupid word is still there

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I see this styles. But it's the html value that is creating the word "Search". Hence I need to overwrite it. It simply shows the search icon for you? Weird. Do you see any settings in google possibly. I dont.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I just took Google's code and pasted it where I wanted the search form to be. Perhaps you should try that, rather than putting it at the bottom of your page and referencing it with other tags where you want the form to be.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I just took Google's code and pasted it where I wanted the search form to be. Perhaps you should try that, rather than putting it at the bottom of your page and referencing it with other tags where you want the form to be.
    Ya I just tried that too. No go

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Ya I just tried that too. No go
    That's fabulously weird. My code is identical to yours, except the var cx = ' ' is different, of course. But if I run them side by side, mine has the icon and yours doesn't. Perhaps, while generating the code, you chose some option not to have the image? That's all I can think of.

    Anyhow, I just went to the custom search page, typed in a domain name and grabbed the code. Maybe you should start again?


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
  •