输入带有 href/button img 里面答案

【问题标题】：Input with a href/button img inside输入带有 href/button img 里面
【发布时间】：2014-11-11 20:22:44
【问题描述】：

我了解如何在input 中使用img，但我不知道如何使img 成为按钮或href。这是我目前所拥有的：

input {
border: none;
padding: 10px;
width: 128px;
border-radius: 5px;

background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png') no-repeat;
background-size: 35px 35px;
border:0;
padding-left:30px;
background-color: rgb(18,41,73);
border-color: rgb(18,41,73);
font-size: 12px;
}

&lt;input type="text" placeholder="my text"&gt;&lt;/input&gt;

我怎样才能使img 箭头被点击img？

【问题讨论】：

为什么要输入链接/按钮？
所以您希望右箭头图标成为表单的提交按钮？
另外，<input /> 元素是自动关闭的。
@BenM 是的。这正是我想要的
@Dan 这正是我的想法

标签： html image css button input

【解决方案1】：

您可以通过使用相对和绝对定位元素来做到这一点，如下面的 sn-p 所示。我在这个sn-p中使用了按钮，您按照相同的步骤将其更改为链接并使用href。

input {
border: none;
padding: 10px;
width: 128px;
border-radius: 5px;
border:0;
padding-left:30px;
background-color: rgb(18,41,73);
border-color: rgb(18,41,73);
font-size: 12px;
}
#in_image{
  position:absolute;
  border:none;
  background:none;
  outline:none;
  }

<div style="position:relative">
 <button id="in_image" onclick="alert('I am a button')"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png" width="35" height="35" /></button>
<input type="text" placeholder="my text" />
</div>

【讨论】：