0

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

这是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;
}
4

1 回答 1

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>
于 2013-09-29T04:06:09.933 回答