0

以下のコードで from を作成しました。

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;
}

入力テキスト領域がフォーカスされると、送信ボタンが拡大鏡の領域に表示されます。ただし、クリックすると、フォームを送信する代わりに、テキスト入力がフォーカスを失ってしまいます。

これを修正する方法はありますか？できればCSSのみ...

4

1 に答える 1

0

ボタンは常にそこにあります。問題は、inputフォーカスを失うと、ボタンがDIV縮小して縮小し、チェーンによってボタンが左に移動することです。

背景画像もまた切り返したのは言うまでもありません...

背景画像から判断すると、これは1フィールドの検索フォームである可能性があり、ユーザーに検索前に何かを入力させるのに適している可能性があるため、ここに少しハックします。

フィドル：

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">
于 2012-09-06T09:27:50.503 に答える