SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    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
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 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,658
    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
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 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,658
    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
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 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,658
    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

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    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?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 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.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    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
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 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,658
    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


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
  •