拡張検索バーを作成していますが、十分な文字がテキスト入力に入力されたときに検索ボタンの下に移動するという問題があります。CSS - 十分な文字が入力されたときに検索バーの問題が拡大する
$('.search-submit').click(function (e) {
e.preventDefault();
var searchbox = $('.search-box');
if(searchbox.hasClass('expanded-search-box'))
{
// close the form
searchbox.removeClass('expanded-search-box');
}
else {
// open the form
searchbox.addClass('expanded-search-box');
}
});
.form-container{
width: 600px;
margin: 0 auto;
border: 1px solid #000;
padding: 33px 14px;
}
.form-container:after{
content: '';
display: block;
clear: both;
}
form{
position: relative;
float: right;
}
.search-box{
top: 0;
right: 0;
width: 90px;
transition: width 0.3s ease-out;
padding: 10px 0px;
padding-left: 10px;
outline: none;
}
.search-submit{
position: absolute;
width: 110px;
top: 0;
right: 0;
padding: 10px 0px;
}
.expanded-search-box{
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-container">
<form action="" class="form">
<input type="text" name="search" class="search-box" placeholder="Search...">
<input type="submit" class="search-submit">
</form>
</div>
私はボタンがクリックされたときに検索バーを表示したいです。
入力テキスト要素にpadding-right
を追加しようとしましたが、表示されます。
この問題を解決するにはどうすればよいですか?
問題peristsを交換してください。あなたの解決策はより奇妙になっています – Cody
あなたはコメントしている間に私はまだそれに取り組んでいましたが、それは今やうまくいくはずです – nekkon