How do I post an image inside of a search box? - css

Question

I am trying to get an image inside of the following search box:
<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>
When I try to direct the mic image to go inside of the search box, it ends up disappearing behind the box. Does anyone know how to place this image inside of the search box without it vanishing?
Here is the fiddle for it: https://jsfiddle.net/gLvzdj0n/3/

Answer 1

Check out this 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 code:
.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

You can solve this problem by css (position)
as the following:
<div id="MyDiv" style="position: absolute;">
<img src="img/clearSearchbutton.png" id="imgInInput" style="position: absolute;">
</div>
then give your div style like margin or padding to put your image inside input
Note if you need 'X' button just do this
<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

you can remove #mic span and apply mic to input background.
see jsfiddle below
Demo Jsfiddle
change your css like below
.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

Check this out.
I had edited your fiddle.
#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*/
<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>

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

Keep it SIMPLE!
All you need to do is just put your stuff in a container div like this:
<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>
Remove left and bottom (they are not much needed) from your input box and ADD position:absolute;.
This is the CSS for your <input>:
display: block;
height: 2em;
width: 100%;
position: absolute;
And now Remove margin-left:800px; and ADD position: absolute; , right: 0px; and margin-top: 4px;. Here is the CSS for your <span>
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;
Hope this resolves your issue.
P.S.Whatever CSS i have mentioned in this is an update of your present link of JSFiddle.