将图像定位在文本输入框内

Question

我想在文本输入框中放置一张图片，并尝试通过将图像标签嵌套在输入标签内，对输入使用相对定位，对图像使用绝对定位，并将图像的“right”和“top”值设置为0来定位图像。 我认为这会将图像放在文本框的右侧。但是它实际上将图像放在了网页的右侧。我不确定为什么会出现这种情况，我通过将“top”和“right”值更改为定位到所需位置来找到了解决方法，但似乎第一种方式应该可以工作，有人能解释一下为什么不行吗？

以下是文本输入框和图像的HTML代码：

<input = "text" id="searchbar"> 

            <a href="#voice"> <img src ="microphone.png" id="voicebutton"/> </a>

</input>

这是我认为会起作用的CSS。

#searchbar{
    border: 0.6px solid #dbdbdb;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:37.5px;
    position:relative;
}

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:0;
    top:0;
}

这是有效的CSS代码。

#searchbar{
    border: 0.6px solid #dbdbdb;
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:37.5px;
    position:relative;
}

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:395;
    top:207;
}

- user6004361

Answer 1

三种方法：

1- 使用 background-size 和 background-position 属性在输入框内设置 background-image。 例如：

input[type=text] {
  box-sizing: border-box;
  padding-left: 10px;  
  font-size: 40px;
  width:85%;
  height:55px;
  border: 2px solid black;
  background-color: floralwhite;
  background-image: url("https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: 99% 100%;
}

input[type=text]:focus {
  background-color: pink;
  outline: none;
}

<input type="text" placeholder="write here" id="searchbar">

第二步- 使用负边距将图像覆盖在其上（您可以将图像设置为链接）。示例：

input[type=text] {
      box-sizing: border-box;
      padding-left: 10px;  
      font-size: 40px;
      width:85%;
      height:55px;
      border: 2px solid black;
      background-color: honeydew;  
      vertical-align: top;
    }

input[type=text]:focus {
      background-color: skyblue;
      outline: none;
    }

img {
margin-top: 3px;
margin-left: -55px;  
}

<input type="text" placeholder="write here" id="searchbar"><a href="#"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;"></a>

3- 把输入框和图像都放在一个容器中；把容器设置为 position: relative，并将图像设置为 position: absolute（你可以将图像设置成链接）。例如：

input[type=text] {
      box-sizing: border-box;
      padding-left: 10px;  
      font-size: 40px;
      width:100%;
      height:55px;
      border: 2px solid black;
      background-color: MintCream;  
      vertical-align: top;
    }

input[type=text]:focus {
      background-color: LightGreen;
      outline: none;
    }

img {
position: absolute;
top: 3px;
right: 5px;  
}

#container {
  position: relative;
  width:85%;
}

<div id="container">
<input type="text" placeholder="write here" id="searchbar">
<a href="#"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;"></a>
</div>

- L777

---

这真的帮了我很多，谢谢！ - M. Lak

Answer 2

在HTML中，input标签没有结束标签，您应该从HTML代码中删除结束标签。此外，您可以通过更改CSS来将元素定位在输入框上方，类似于以下内容（您的CSS几乎正确，问题在于HTML）：

#voicebutton{
    width:16px;
    height:23px;
    position:absolute;
    right:16px;
    top:16px;
}

- goncalopinto

Answer 3

在HTML中，输入标签没有结束标签（与XHTML相反），因此您的a标签位于输入标签之外。

- andydavies

Answer 4

首先，你不能在像素中使用小数，比如 height: 37.5px;。这是行不通的。同样，right: 395;也不行，因为它没有指定使用什么单位：像素、ems、百分比？input="text" 是不正确的，应该是 input type="text"，因为它可以是例如 email 或 radio。

话虽如此，要实现你想要的效果，你可以在输入字段周围添加一个包装器（比如 .box-wrapper），并给它相对定位和与输入字段相同的大小。这将得出下面的示例。

.box-wrapper {
    position: relative;
    width: 600px;
    height: 38px;
}

#searchbar{
    border: 1px solid #dbdbdb;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 38px;
    position: relative;
}

#voicebutton{
    width: 16px;
    height: 23px;
    position: absolute;
    top: 0;
    right: 0;
}

<div class="box-wrapper">
  <input type="text" id="searchbar">
  <a href="#voice"><img src ="http://dummyimage.com/50x50/ffff00/fff" id="voicebutton"/></a>
</div>

- Roy