Custom placeholder in input with icon - css

Question

I am trying to make a custom placeholder for my "Search" input. It should look like a search icon (using Bootstrap glyphicon glyphicon-search classes for that) and then the word "Search", inside the input element, just as a placeholder looks like, and centered.
I am trying to position the div containing these to elements inside the input but I can't get it right.
Here's the code in jsfiddle.
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 340px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
display: inline;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 10px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .placeholder {
display: inline;
position: relative;
top: 30%;
width: 40px;
margin: 0 auto;
text-align: center;
font-size: 10px;
}
Then when focusing on the input the placeholder should be gone, I guess this shouldn't be difficult with some js.
But back to the issue, what am I doing wrong? How can I display the placeholder as intented?

Answer 1

Why not simplify this enormously? You already have the placeholder built into HTML! Here's what you can do:
input[type="search"]::-webkit-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
input[type="search"]::-moz-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
input[type="search"]:-ms-input-placeholder:before {
content: "\e003 ";
font-family: 'Glyphicons Halflings';
}
<input type='search' placeholder='search here' />
Now don't be worried, the icon isn't displaying here because I haven't included font-awesome (or whatever the Glyphicons Halflings font is provided by), but this makes it tremendously simply to create a nice placeholder. It even works like one! It also reduces your code greatly, although browser support is a little less stellar (it really depends how far back you want to go).
Font Awesome uses the unicode glyphs and a font with all those icons included, so as long as you use the right font and copy in the correct character into your content property, this will work.
this was tested in Safari and Chrome

Answer 2

My solution:
https://jsfiddle.net/83x8tfwp/6/
HTML:
<div class="search-wrapper">
<form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont">
<div class="placeholder">
<div>
<span class="glyphicon glyphicon-search"></span>
<span>Search</span>
</div>
</div>
</form>
</div>
CSS:
.search-wrapper {
max-width: 280px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
position: relative;
color: #aaa;
}
.search-wrapper .search-input {
border: 1px solid #ddd;
border-radius: 15px;
background-color: #eee;
width: 220px;
height: 31px;
padding: 3px 15px;
transition: 0.25s all;
}
.search-wrapper .search-input:focus {
outline: 0 none;
background-color: #fff;
transition: 0.25s all;
}
.search-wrapper .search-input:focus + .placeholder {
display: none;
}
.search-wrapper .placeholder {
position: absolute;
top: 8px;
left: 38%;
margin: 0 auto;
text-align: center;
font-size: 13px;
}
JavaScript:
$('.placeholder').on('click', function() {
$('.search-input').focus();
});
if ($('.search-input').val()) {
$('.placeholder').hide();
}
$('.search-input').on('blur', function() {
if (!$('.search-input').val()) {
$('.placeholder').show();
}
});
$('.search-input').on('focus', function() {
if (!$('.search-input').val()) {
$('.placeholder').hide();
}
});
$('.search-input').on('input', function() {
if ($('.search-input').val()) {
$('.placeholder').hide();
}
});