CODEWITHSUNDEEP
htmlcss
kdm
kdm

Reputation: 35

Text in my search box is covered by my search input background after clicking outside of it?

If you type something in my search box and click outside of it before clicking the magnifying glass, the background in the input stays there when there is text inside of it. How can I hide the background when the input has text inside of it?

Here's the 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>

Here's the 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;
}

Upvotes: 0

Views: 383

Answers (1)

Jacques
Jacques

Reputation: 3774

The problem is that the background image is always seen through the text. It would not work to well otherwise, especially if your search box was a different color than white. (You'd see a white box around the text if it was not how it is now)

Remove the word "SEARCH" from the background image and use the placeholder attribute as the 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>

Upvotes: 1

Related Questions