Grow your CSS skills. Land your dream job.

Modify search button

  • # March 18, 2012 at 4:11 am

    Hey everyone,
    I am looking to add a button to the end of my search box that is located above my header image. I have tried a few different methods and so far can’t get the image to show up.
    Here is my website

    Thanks for all the help so far as I really appreciate it!

    # March 18, 2012 at 4:16 pm

    You can use something like this:
    Add the following html code, right after your input field.

    HTML:

    CSS:

    .section .input {
    border: medium none !important;
    padding: 0 !important;
    position: relative;
    right: -27px;
    top: -21px;
    }
    # March 18, 2012 at 4:59 pm

    thanks @farzadina can you take a look real quick. I just need to line the search box with the rest of the line and cant get it to move up.

    http://petrowest.squarespace.com/

    # March 18, 2012 at 5:12 pm

    You can first line them up by changing the top: 0px; to top: 6px; in the .section .input. Then add this rule to your stylesheet to bring them up:

    .section{
    margin-top:-11px;
    }
    # March 18, 2012 at 5:16 pm

    First, trim the empty areas from the button — the button itself is 57×24 but the searchbutton.png image as a whole is 74×39. Too much on the outsides.

    Second, now that you have an image as a submit button, you can remove the regular input button code, so remove .

    That should get you on your way.

    (That is, if you really must use a table for this.)

    # March 18, 2012 at 5:55 pm

    @Senff @farzadina that worked great! thanks. I will also trim the area on the button to fix it up.
    Just one last little thing to fix up. When you view the site on an iphone it shows this small bubble in between the text field and button. Any idea how to get rid of that.

    # March 18, 2012 at 7:37 pm

    See my second point.

    # March 18, 2012 at 7:47 pm

    sorry about that… its good now thanks.

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

You must be logged in to reply to this topic.

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