html - 如何在输入不为空时仅使用 css 永久隐藏搜索图标

Question

我在每个输入文本框中应用搜索图标。 当图标具有一定值(value)时，我的问题就出现了。

你可以在这里看到它-

Fiddle

当我聚焦时，搜索图标会隐藏，但我该如何管理，以便在它有一些值(value)时一直隐藏这个图标？

css-

.input-search {
    background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
}
    .input-search:focus {
        background-image:none;
    }

我可以很容易地用 jQuery 做到这一点，但是有什么方法可以只用 CSS 做到这一点吗？

Answer 1

我已经更新了你的 fiddle ，你可以试试看! http://jsfiddle.net/X7k2B/6/

HTML:

<input 
    type="text" 
    id="myInput" 
    placeholder="Some Fallback Text" >

CSS:

#myInput::-webkit-input-placeholder {
  color: transparent;
  text-indent: -9999px;
   background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput::-moz-placeholder {
  /* Firefox 19+ */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/123x17&text=PlaceholderImage");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-moz-placeholder {
  /* Firefox 18- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/123x17&text=PlaceholderImage");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-ms-input-placeholder {
  /* IE 10- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/123x17&text=PlaceholderImage");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}