html - 在我的搜索框外单击后，我的搜索框中的文本被我的搜索输入背景覆盖了？

Question

如果您在我的搜索框中键入内容并在单击放大镜之前单击其外部，则当其中有文本时，输入中的背景会保留在那里。当输入框内有文本时，如何隐藏背景？

这是 html:

<div id="searchwrap">
    <li id="search">
        <form id="search-form" name="search" action="/products" method="get">
            <input id="search-input" name="search" type="text">
            <input id="search-button" src="searchiconurl" name="submit" type="image">
        </form>

这是 CSS:

input, textarea {
    padding: 0px 0px 0px 8px;
    width: 150px;
    border: none;
    height: 19px;
    border: 2px solid #f0f0f0;
    background: #ffffff;
    outline: none;
    background-image:url(BACKGROUND);
    background-repeat:no-repeat;
    background-position: 4px 4px;
}

input:focus, textarea:focus {
    border: 2px solid #333;
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .2);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .2);
    outline: none;
    background-image:url(BACKGROUND);
    background-repeat:no-repeat;
    background-position:4px 4px;
}

Answer 1

问题是背景图片总是能透过文字看到。否则效果不佳，尤其是当您的搜索框颜色不同于白色时。 (如果不是现在的样子，您会在文本周围看到一个白框)

从背景图片中删除单词“SEARCH”并使用 placeholder 属性作为占位符。

<div id="searchwrap">
    <li id="search">
    <form id="search-form" name="search" action="/products" method="get">
      ***<input id="search-input" name="search" placeholder="SEARCH" type="text">***
      <input id="search-button" src="http://www.zeusjones.com/wp-content/themes/zeusjones/assets/images/search_icon.png" name="submit" type="image">
    </form>