Grow your CSS skills. Land your dream job.

Input Display Error

  • # February 17, 2013 at 11:03 pm

    Hey guys.

    I created a google custom search using my own search box for the home page of my site. http://windbertsa.com

    But, where I have the image for the ‘go’ to search, the numbers 010 keep showing up and I cannot figure out how to get rid of them.

    Somehow I think they are displaying over top the image I have for the search icon.

    Any help would be greatly appreciated!

    __
    # February 17, 2013 at 11:58 pm

    From your markup:

    You’re limiting the input to 24px wide, so you only see `010`.

    And yes, they are “on top” of the image, since it’s a background image.

    # February 18, 2013 at 12:01 am

    The value of your input:button is “010940250076997835162:WMX1781837400″

    Not sure where this is coming from but the first three characters are 010 and that is what you are seeing.

    # February 18, 2013 at 9:47 am

    @nordstromdesign that value is the value given to me from google’s custom search.

    If it’s actually ‘on top’ of the image, is there a away for me to change where that element is in the code so that it doesn’t show up?

    # February 18, 2013 at 11:06 am

    The `value` attribute is the text that actually shows up on the button. You’re using a background image to label the image so you need to hide the web text. **Adding `font-size: 0` to the button solves it.**

    # February 18, 2013 at 11:09 am

    You might also want to look into this: http://css-tricks.com/webkit-html5-search-inputs/

    # February 18, 2013 at 11:32 am

    @tomrogers123 Thanks! that did seem to fix it. I don’t really understand why the google custom search told me to set it as a value if it actually gets displayed then.

    @Paulie_D That article looks interesting enough, I will check it out for sure :) Thanks.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".