Question

我正在尝试在以下搜索框中获取图片：

<input class="search" type="text" name="q" id="q" size="70" maxlength="2048" style=  "display:block; position:relative; left:35.5%; bottom:-3px; height:2em;">

</input>

当我尝试将麦克风图像指向搜索框内部时，它最终消失在框后面。有没有人知道如何将这个图像放在搜索框内而不会消失？

以下是它的小提琴：https://jsfiddle.net/gLvzdj0n/3/

Answer 1

查看此Jsfiddle link

HTML code：

<div class="wrap left rounded">
    <input type="text" class="search left rounded" value="Search for dishes or restaurants" />
    <button class="go left rounded"><span></span></button>
</div>

CSS代码：

.left {
    float:left;
}
.rounded {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
.wrap {
    position:relative;
    padding:5px 6px 6px 7px; /* readjust in jsfiddle*/
    background:#f0f0f0;
    border:1px solid #ccc;
    overflow:hidden;
}
.search {
    width:360px;
    position:relative; top:2px; /* readujst in jsfiddle */
    padding:8px 5px 8px 30px;
    border:1px solid #ccc;
    background:white url(http://i.imgur.com/lFkqn.png) left center no-repeat;
}
.go {
    position:relative; top:0;
    padding:3px 5px 2px;
    margin-left:8px;
    border:none;
    background: -webkit-gradient(linear, left top, left bottom, from(#d631a7), to(#8f1b64));
    background: -moz-linear-gradient(top,  #d631a7,  #8f1b64);
}
.go span {
    display:block;
    width:64px; height:28px;
    background:url(http://i.imgur.com/mxxzQ.png) 0 0 no-repeat;
}

Answer 2

您可以通过css（位置）解决此问题

如下：

<div id="MyDiv" style="position: absolute;">
  <img src="img/clearSearchbutton.png" id="imgInInput" style="position: absolute;">
</div>

然后给你的div样式，如边距或填充，将你的图像放入输入

请注意，如果您需要“X”按钮，请执行此操作

<input class="search" type="search" name="q" id="q" size="70" maxlength="2048" style=  "display:block; position:relative; left:35.5%; bottom:-3px; height:2em;">

</input>

Answer 3

您可以移除#mic范围并将麦克风应用于输入背景。见下面的jsfiddle

Demo Jsfiddle

改变你的css如下

.search {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 24px 24px;

}

Answer 4

检查一下。我编辑了你的小提琴。

＆＃13;

#mic {
  background-position: -2.99999976158142px 0px;
  color: rgb(17, 34, 204);
  cursor: pointer;
  display: block;
  height: 22.9861125946045px;
  vertical-align: middle;
  white-space: nowrap;
  width: 16.9965286254883px;
  perspective-origin: 8.48958396911621px 11.4930562973022px;
  transform-origin: 8.48958396911621px 11.4930562973022px;
  background: rgba(0, 0, 0, 0) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC) no-repeat scroll -2.99999976158142px 0px / 23.9999980926514px 23.9999980926514px padding-box border-box;
  border: 0px none rgb(17, 34, 204);
  font: normal normal normal normal 16px/38px arial, sans-serif;
  outline: rgb(17, 34, 204) none 0px;
  right: 10px;
  top: 15px;
  position: absolute;
}
/*#SPAN_1*/

＆＃13;

<input class="search" type="text" name="q" id="q" size="70" maxlength="2048" style="display:block; position:relative; left:35.5%; bottom:-3px; height:2em;">

</input>

<span id="mic"></span>

＆＃13;

Answer 5

Try this link and I think that is what you want

 http://codepen.io/rafibomb/pen/rFgcI?editors=101 

placing an image inside search box.

Answer 6

保持简单！你需要做的只是把你的东西放在像这样的容器div中：

<div style="width:50px; height:20px; position:absolute;">
    <input class="search" type="text" name="q" id="q" size="70" maxlength="2048" style=  "display:block; position:relative; left:35.5%; bottom:-3px; height:2em; z-index:1;">
</input>
<span id="mic"></span>
</div>

从输入框中移除 left和bottom（不需要它们），然后添加 position:absolute;。
这是您<input>的CSS：

display: block;
height: 2em;
width: 100%;
position: absolute;

现在删除 margin-left:800px;和 ADD position: absolute;，right: 0px;和margin-top: 4px;。以下是<span>

的CSS

color: #12C;
cursor: pointer;
display: block;
vertical-align: middle;
white-space: nowrap;
width: 16.9965px;
border: 0px none #12C;
outline: 0px none #12C;
height: 22.9861px;
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC") no-repeat scroll -3px 0px / 24px 24px;
position: absolute;
right: 0px;
perspective-origin: 8.48958px 11.4931px;
transform-origin: 8.48958px 11.4931px 0px;
margin-top: 4px;

希望这能解决你的问题 P.S。无论我在这里提到的CSS是对你目前JSFiddle链接的更新。

如何在搜索框中发布图像？

6 个答案:

Demo Jsfiddle