web creating

POROA

【CSS】検索を選択すると大きくなるinputボックス

カーソルを合わせるとグっと大きくなり入力する箇所が大きくなる検索ボックス。

入力する場所をアピールをしたい場合や、小さい場所に置いて必要な時だけ大きくするなど
利用する事も多いかと思い、作成してみました。

【デモ】
【HTML】
<div id="search_box">
<form>
	<input type="text" value="" name="search_text">
</form>
</div>

【CSS】
    #search_box input[type="text"] {
        transition:ease-out 0.5s;
    }

    #search_box input[type="text"] {
        width: 100px;
        height: 20px;
        border: 1px solid;
        box-sizing: border-box;
    }

    #search_box input[type="text"]:focus {
        outline: 0;
        border-color: orange;
        width: 200px;
        height:50px;
    }

こちらは、CSSのみで作成しました。
この方法が一番簡単かと思います。
ただし、submitでボタンを作成した場合、ボタンを押すときにフォーカスが外れる為押せなくなっていますので、 Enterでのみ遷移できます。
デザイン上ボタンが必要な場合はjQueryで作成する必要があるでしょう。

jQueryバージョン

【デモ】

【HTML】
<div id="search_box2">
<form>
    <input type="text" value="" name="search_text">
    <input type="submit" value="送信" >
</form>
</div>

【jQuery】
$(function(){
    $('#search_box2 input[type="text"]').on('focus',function(){
        $('#search_box2 form').addClass('focus');
    });
    $(document).on('click',function(event){
        if (!$(event.target).closest('#search_box2 input').length) {
            $('#search_box2 form').removeClass('focus');
        }
    });
});

【CSS】
#search_box2 input[type="text"] , #search_box2 input[type="submit"] {
        transition:ease-out 0.5s;
    }

    #search_box2 input[type="text"] {
        width: 100px;
        height: 30px;
        border: 1px solid;
        border-right: none;
        box-sizing: border-box;
    }

    #search_box2 form.focus input[type="text"] {
        outline: 0;
        border-color: orange;
        width: 200px;
        height:50px;
    }

    #search_box2 input[type="submit"] {
        background: none;
        text-indent: -9999px;
        width: 30px;
        height: 30px;
        position: relative;
        border: 1px solid;
        border-left: none;
        right: 5px;
        background-image: url(/img/seach_ico.png);
        background-repeat: no-repeat;
        background-size: 17px;
        background-position: right 5px center;
    }
	
    #search_box2 form.focus input[type="submit"] {
        height:50px;
        width:50px;      
        border-color: orange;
    }

基本的に、実行していることは同じです。 input以外をクリックしたときにclassを消す処理を行っています。
著者:poroa | 投稿日:2016年11月24日 | カテゴリ:CSS
  • ■同じカテゴリの記事
  • ■よく見られている記事
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング