How TO - アニメ付き検索フォーム

❮ 前章へ次章へ ❯

CSS を使用したアニメ付き検索フォームの作成方法を学習します。

アニメ付き検索フォームの作成方法

入力フィールドをクリックしてください：

ステップ 1) HTML の追加：

例

ステップ 2) CSS の追加：

例

.input[type=text] {
    width: 130px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
input[type=text]:focus {
    width: 100%;
}

Try it Yourself »

HTML フォームをスタイルする方法の詳細については、CSS フォーム・チュートリアルをご覧ください。

❮ 前章へ次章へ ❯