Grow your CSS skills. Land your dream job.

making an input box image clickable

  • # February 26, 2013 at 11:20 am

    hi.. this is my html:

    this is my css:

    #name{
    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.

    http://css-tricks.com/how-to-ask-a-good-question-in-the-forums/

    # 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

    **WE NEED A LINK or A CODEPEN.**

    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

    @websitecodetutorials

    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

    Nope.

    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: http://codepen.io/Paulie-D/pen/yELfD

    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.

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