Results 1 to 9 of 9

Thread: Clickable Icon in search bar

  1. #1
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Clickable Icon in search bar

    Hi guys,

    How would I go about adding a clickable icon which submits the form to a search bar? The outcome I am ideally looking for is this: http://prntscr.com/mp5wj

    Thanks
    Last edited by Vernier; 12-20-2012 at 08:27 PM. Reason: Resolved

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,940
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    What do you mean exactly?

    Are you simply wanting to change a 'standard' HTML form's submit button into an image icon - button only? (http://www.10sharpdesign.com/accessi...on-submit.html)

    Or do you want to know how to use images/CSS to totally customise the look of a 'standard' HTML form - text field and submit button?

    Maybe something here will help: http://speckyboy.com/2012/02/15/how-...s3-search-box/ or http://speckyboy.com/2009/07/02/20-r...rms-using-css/
    Last edited by Beverleyh; 12-20-2012 at 02:02 PM. Reason: resources provided
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Hi, thanks for the reply

    I basically want the magnifying glass icon in http://prntscr.com/mp5wj to be clickable so that once it's clicked it will submit the form but I want it where it currently is. I've currently got the magnifying glass as a background image. Here's a snippet of the html and the css:

    Code:
    <input type="text" class="textbox search_box" name="keywords" value="Search..." onfocus="Clear(this);"/>
    Code:
    .search_box {
        font-style: italic;
        background: #000 url(images/themes/v1/search_icon.png) right no-repeat !important;
        color: #fff !important;
        padding-right: 17px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        padding-left: 10px !important;
        float: right;
    }
    Thanks very much

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,940
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    OK - I'd do it like this;

    1 - create a background image of the search bar/field - just the blue border and black text field (no magnifying glass)
    2 - create a seperate magnify glass icon image

    With this CSS;
    Code:
    #search-bar { width:175px; height:29px; background:#000 url('search-bar.png') 0 0 no-repeat; }
    #search .field { float:left; margin:5px 0 0 8px; font:8pt Verdana; color:#fff; font-style:italic; width:130px; height:16px; background:#000; border:0; }
    #search .button { float:right; margin:7px 7px 0 0; }
    And this HTML;
    Code:
    <div id="search-bar">
    <form id="search">
    <input type="text" class="field" name="searchterm" maxlength="30" value="Search..." /><input type="image" class="button" name="search" src="search-button.png" title="Search..." />
    </form>
    </div>
    You should get something like this: http://fofwebdesign.co.uk/template/_...search-bar.htm

    Tested in IE7/8/9, Firefox, Chrome, Safari, Opera
    Last edited by Beverleyh; 12-20-2012 at 05:51 PM. Reason: formatting
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    Vernier (12-20-2012)

  6. #5
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Is this what you are looking for

    http://www.web-user.info/test/searchform.html
    Thanks,

    Bud

  7. The Following User Says Thank You to ajfmrf For This Useful Post:

    Vernier (12-20-2012)

  8. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,940
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    I also added a bit of extra styling for IE only (to make the text sit more centrally on the vertical);
    Code:
    <!--[if IE]><style type="text/css">#search .field { padding-top:2px; }</style><![endif]-->
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #7
    Join Date
    Feb 2012
    Posts
    33
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks guys! I managed to get it working perfectly using Beverleyh's method. Thanks a bunch guys

  10. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,940
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    No problem. Glad it made sense
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  11. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,940
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    Just to let you know that when I tested my previous Search Bar example on MAC, I noticed that the vertical allignment wasn't too great.

    Please note the changes I made below (in red);
    Code:
    #search-bar { width:175px; height:29px; background:#000 url('search-bar.png') 0 0 no-repeat; }
    #search .field { float:left; margin:5px 0 0 8px; font:8pt Verdana; color:#fff; font-style:italic; width:130px; height:20px; line-height:18px; padding:0; background:#000; border:0; }
    #search .button { float:right; margin:7px 7px 0 0; }
    And the IE specific styling;
    Code:
    <!--[if IE]><style type="text/css">#search .field { height:18px; }</style><![endif]-->
    The main thing I forgot yesterday was to zero out the padding on the form text field - browsers have their own default paddings so this was causing some descrepancies with the text field height, and therefore vertical text alignment, before we'd even got started (Doh!)

    Then, to correct the height reduction caused by the removal of padding, I increased the height to from 16px to 20px. This fixed things in browsers on Windows, but sadly not on MAC.

    The line-height doesn't appear to have any effect in any major browsers in Windows in this example, but on MAC it does, so I set the line-height to 18px, a bit smaller than the height of 20px, to make the text sit higher, so improving vertical alignment on MAC too.

    Of course IE still wants to do its own thing so I set its specific text field height to 18px there to visually match things up across all browsers as best as possible.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. clickable slider
    By Jamcan in forum General Paid Work Requests
    Replies: 1
    Last Post: 07-15-2012, 06:51 PM
  2. Replies: 0
    Last Post: 12-28-2009, 08:14 AM
  3. Clickable world map
    By Foundas in forum Looking for such a script or service
    Replies: 1
    Last Post: 10-03-2009, 02:59 AM
  4. Replies: 0
    Last Post: 04-06-2008, 07:57 PM
  5. Button Clickable
    By Chrismhen54 in forum HTML
    Replies: 11
    Last Post: 01-01-2006, 11:33 PM

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
  •