Question

我正在尝试为“搜索”输入创建自定义占位符。它应该看起来像一个搜索图标（使用Bootstrap glyphicon glyphicon-search类），然后在输入元素中使用单词“Search”，就像占位符一样，并且居中。

我正在尝试将包含这些内容的div定位到输入中的元素，但我无法正确使用。

以下是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;
}

然后当关注输入时，占位符应该消失，我想这对于一些js来说应该不难。

但回到这个问题，我做错了什么？如何将占位符显示为有意？

Answer 1

为什么不简化这个？您已经拥有内置于HTML中的placeholder！以下是您可以做的事情：

＆＃13;

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

＆＃13;

<input type='search' placeholder='search here' />

＆＃13;

现在不要担心，图标不会显示在此处，因为我还没有包含字体真棒（或者Glyphicons Halflings字体是什么由...提供，但这简直就是创建一个漂亮的占位符。它甚至像一个人一样！它也大大减少了你的代码，虽然浏览器支持不那么出色（这实际上取决于你想要的距离）。

Font Awesome使用unicode字形和包含所有这些图标的字体，因此只要您使用正确的字体并将正确的字符复制到content属性中，这就行了。

这是在Safari和Chrome中测试的

Answer 2

我的解决方案：

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

自定义占位符输入图标

2 个答案: