純粋な CSS3_html/css_WEB-ITnose によって実装されたフォーム入力の強調表示効果

纯CSS3实现的联系人表单输入効果 * {マージン: 0px;パディング: 0px; }

body { マージン: 0 自動; 背景: #f5f5f5; カラー: #555; 幅: 800ピクセル; font-family: 'Yanone Kaffeesatz'、arial、sans-serif; }

h1 { color: #555; マージン: 0 0 20px 0; }

label { font-size: 20px; color: #666; }

form { float: left; border: 1px Solid #ddd; パディング: 30 ピクセル 40 ピクセル 20 ピクセル 40 ピクセル; マージン: 75px 0 0 0; 幅: 715px; 背景: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; 背景: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF)); 背景: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); -webkit-box-shadow:0px 0 50px #ccc; -moz-box-shadow:0px 0 50px #ccc; ボックスシャドウ:0px 0 50px #ccc; }

フィールドセット { ボーダー: なし; }

#user-details { float: left; width: 230px; }

#user-message { float: right; width: 405px; }

input, textarea { パディング: 8px; マージン: 4px 0 20px 0; 背景: #fff; 幅: 220ピクセル; フォントサイズ: 14px; カラー: #555; border: 1px #ddd Solid; -webkit-box-shadow: 0px 0px 4px #aaa; -moz-box-shadow: 0px 0px 4px #aaa; ボックスシャドウ: 0px 0px 4px #aaa; -webkit-transition: バックグラウンド 0.3 秒のリニア。 }

textarea { 幅: 390px; 高さ: 175ピクセル; }

input:hover, textarea:hover { 背景: #eee; }

input.submit { 幅: 150px; 色:#eee; text-transform: 大文字; margin-top: 10px; background-color: #18a5cc; border: none; -webkit-transition: -webkit-box-shadow 0.3s Linear; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 背景: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); 背景: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc); }

input.submit:hover { -webkit-box-shadow: 0px 0px 20px #555; -moz-box-shadow: 0px 0px 20px #aaa; ボックスシャドウ: 0px 0px 20px #555; カーソル: ポインタ。 }

＜ボディ＞ http://www.999jiijiu.com/

お問い合わせください ... 名前: メール: 電話: ウェブサイト: あなたのメッセージ: