Question

我可以在输入字段中使用background属性定位背景图像，但我希望在单击时触发操作。

我可以点击背景图片上的操作吗？

我只想在输入的右侧放置一个小的'X'图像，清除输入。

Answer 1

您绝对可以在<input>上放置链接，然后将text-indent应用于<input>，为图片腾出空间。例如：

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

和

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

现场演示：http://jsfiddle.net/ambiguous/TgaFf/

外部<div id="outer">就是给我一些适用position: relative的东西;绝对定位的元素相对于最近的祖先定位，其position不是static。 text-indent上的<input>从<input>的左侧开始输入光标16px，从而为图像留出空间。当然，在现实世界中，你会调整top，left，边距，填充......，以使所有内容都正常排列并且看起来很漂亮。

Answer 2

抱歉，我误解了你的问题，在输入中添加了一个类，你可以使用jquery点击功能或javascript onClick

Answer 3

也许，如果你可以用Jquery / js将类传递给它。否则有一些CSS3选项，如过渡 - 动画，请参阅www.css3please.com取决于你想要做什么？

Answer 4

<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>

我想，你想要这个......

regardz

如何使用css链接输入文本框中的图像

4 个答案: