JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<input type="search" value="検索する">

CSS

input{margin:30px;}

JavaScript

var long = '250px';
var short = '140px';     

$('input').focus(function(){
    if($(this).val()==='検索する'){
        $(this).val('');
    }
    //animate the box
    $(this).animate({
        width: long},400);
}); 

$('input').blur(function(){
    if($(this).val()===''){
        $(this).val('検索する');
    }
    $(this).animate({
        width: short},500);
});