Question

I have created a from with the code below:

HTML:

<form>
   <div class="searchInputBox">
      <input type="text" tabindex="99" class="searchInput">
      <input type="submit" tabindex="100" class="searchbutton">
   </div>
</form>

CSS:

.searchInputBox {
    float: left;
    width: 270px;
}
.searchInput:focus + .searchbutton {
    visibility: visible;
}
.searchInput:focus {
    background: url("http://lostcoastoutpost.com/media/img/icons/toolbar_find.png") no-repeat scroll 219px 6px rgba(255, 255, 255, 0.4);
    color: #000000;
    padding: 7px 35px 7px 15px;
    width: 195px;
}
.searchInput {
    background: url("http://lostcoastoutpost.com/media/img/icons/toolbar_find.png") no-repeat scroll 10px 6px rgba(255, 255, 255, 0.3);
    border: 1px solid #ccc;
    color: #D7D7D7;
    float: left;
    padding: 7px 15px 7px 35px;
    width: 150px;
}
.searchbutton {
    background: none repeat scroll 0 0 transparent;
    border-color: transparent;
    color: transparent;
    cursor: pointer;
    float: left;
    height: 16px;
    left: -26px;
    margin: 6px 0;
    position: relative;
    visibility: hidden;
    width: 16px;
}

The submit button becomes visible in the area the magnifier is, after the input text area gets focus. However, clicking on it results in the text input are losing focus instead of submitting the form.

Is there any way this could be fixed? Only with CSS preferably…

Answer 1

Your button is always there, the problem is that when your input loses focus, it shrinks back, causing you DIV to shrink back, and chain-causes your button to move left.

Not to mention the background image also swiched back…

Judging by your background image, this may be a one-field search form, which may be proper to force users to input something before search, so here’s a little hack:

fiddle:

http://jsfiddle.net/7LENQ/

CSS:

.searchInput:valid + .searchbutton {
    visibility:visible;
}
.searchInput:focus, .searchInput:valid {
    background: url("http://lostcoastoutpost.com/media/img/icons/toolbar_find.png") no-repeat scroll 219px 6px rgba(255, 255, 255, 0.4);
    color: #000000;
    padding: 7px 35px 7px 15px;
    width: 195px;
}

HTML:

<input type="text" tabindex="99" pattern=".+" required class="searchInput">