html - 输入里面有一个 href/button img

Question

我了解如何在 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;
}

<input type="text" placeholder="my text"></input>

如何使 img 箭头成为单击 img 时的箭头？

Answer 1

您可以使用相对和绝对定位元素来做到这一点，如下面的代码片段所示。我在此代码段中使用了按钮，您可以按照相同的步骤将其更改为链接并使用 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>