How to link an image in input text box using css_问答_开发者

How to link an image in input text box using css

开发者 https://www.devze.com 2023-03-24 23:01 出处：网络

I can 开发者_StackOverflow中文版position a background image using the background property in an input field but I want an action to trigger when it is clicked.

相关专题：css

I can 开发者_StackOverflow中文版position a background image using the background property in an input field but I want an action to trigger when it is clicked.

Can I trigger an action on a background image click?

I just want to place a small 'X' image over the right hand side of input which clears the input.

You can absolutely position a link over the <input> and then apply a text-indent to the <input> to make room for the image. For example:

<div id="outer">
    <a href="javascript:void(0)" onclick="alert('click')"><img src="http://placekitten.com/16/16"></a>
    <input type="text">
</div>

And:

#outer {
    position: relative;
}
#outer a {
    position: absolute;
    top: 0;
    left: 0;
}
#outer input {
    text-indent: 16px;
}

Live demo: http://jsfiddle.net/ambiguous/TgaFf/

The outer <div id="outer"> is just there to give me something to apply position: relative to; absolutely positioned elements are positioned with respect to the nearest ancestor whose position is anything other than static. The text-indent on the <input> starts the input cursor 16px from the left side of the <input> and thus leaves space for the image. In the real world you would, of course, adjust the top, left, margins, paddings, ... to make everything line up properly and look pretty.

sorry i misunderstood your question, add a class to the input, and you can do it with a jquery click function or a javascript onClick

Maybe, if you can pass a class to it with Jquery/ js. Otherwise there are some CSS3 options like transitions - to animate, see www.css3please.com Depends what you're wanting to do?

<html>
<head>
    <script type="text/javascript">

  function callmee()
  {
    alert("call");
  }

   </script>
</head>

<body>
    <input type="button" style="background-image:url(shahrukh2.jpg);" onclick="callmee()"></div>
</body>

i think, u want this..

regardz