The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

making an input box image clickable

  • # February 26, 2013 at 11:20 am

    hi.. this is my html:

    this is my css:

    background-color: #FFFFFF;
    background-image: url(“file:///Users/pallavi/Documents/workspace/PalCas/WebContent/images/forward_arrow.png”);
    background-position: 95% center;
    background-repeat: no-repeat;
    border: 1px solid grey;
    border-radius: 5px 5px 5px 5px;
    height: 30px;
    margin-left: 480px;
    margin-top: -180px;
    padding-left: 10px;
    width: 250px;

    i want to click img

    background-image: url(“file:///Users/pallavi/Documents/workspace/PalCas/WebContent/images/forward_arrow.png”);

    and open a new html.

    how would i do that???

    Please reply asap.

    # February 26, 2013 at 11:21 am

    I don’t understand, really.

    # February 26, 2013 at 11:25 am

    You can’t click a background image.

    **Do you have a link?**

    If you want to go to a different page you have to use an anchor link and I’m guessing you don’t have one.

    # February 26, 2013 at 11:26 am

    this is an input box which has an arrow image. i want click arrow image.

    Is there any other way to do it.. any change in html or css can be done?

    # February 26, 2013 at 11:28 am


    Frankly, I’m not sure what you are trying to do.

    What kind of input..there are several?

    # February 26, 2013 at 11:29 am

    Wrap the input in an anchor.

    # February 26, 2013 at 11:30 am


    I’m assuming that he wants the new page to be related to the contents of the input…so that probably won’t work.

    I’m feeling a jQ solution coming on. :)

    # February 26, 2013 at 11:34 am

    yes right..the same discussion..

    if i wrap my input tag with an ‘a’ tag will it work?

    # February 26, 2013 at 11:35 am


    You haven’t specified what it is you are trying to do.

    What relation does the contents of the input have to the link?

    # February 26, 2013 at 11:37 am

    see i have this textbox..

    inside this textbox i wanna write something and hit the image and it will go to next html.. hw can i achieve this?

    # February 26, 2013 at 11:39 am

    Please specify what you mean by ‘next html’

    Do you mean a set page that won’t change?

    # February 26, 2013 at 11:43 am

    yes.. a static html.. like i can do:

    but in this case it is set as my background image for the textbox.. so hw to do for this particular case..

    # February 26, 2013 at 11:45 am

    sorry code dint come:
    yes.. a static html.. like i can do:

    # February 26, 2013 at 12:05 pm

    OK….as I said, you can’t click a background image but you can have a link with a background image.

    You have to have an anchor link in your HTML (ideally) and position it after the text area:

    We may not be able to style it as you were hoping but this will give you an idea.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed