Question

我了解如何在img中使用input，但我不知道如何制作img按钮或href。这就是我到目前为止所做的：

＆＃13;

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

＆＃13;

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

＆＃13;

如何点击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>

在里面输入一个href / button img

1 个答案: