Supports the form input highlighting effect implemented by pure CSS3, and css3 for form highlighting.
<! DOCTYPE html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> contact form input effect implemented by CSS3 only </title>
<! -- Import Google Font-Yanone Kaffeesatz -->
<Link href = 'HTTP: // fonts.googleapis.com/css? Family = Yanone + Kaffeesatz 'rel = 'stylesheet 'Type = 'text/css '/>
<Style type = "text/css">
* {Margin: 0px; padding: 0px ;}
Body {
Margin: 0 auto;
Background: # f5f5f5;
Color: #555;
Width: 800px;
Font-family: 'yanone kaffeesatz', arial, sans-serif;
}
H1 {
Color: #555;
Margin: 0 0 20px 0;
}
Label {
Font-size: 20px;
Color: #666;
}
Form {
Float: left;
Border: 1px solid # ddd;
Padding: 30px 40px 20px 40px;
Margin: 75px 0 0 0;
Width: 715px;
Background: # fff;
-Webkit-border-radius: 10px;
-Moz-border-radius: 10px;
Border-radius: 10px;
Background:-webkit-gradient (linear, 0% 0%, 0% 40%, from (# EEE), to (# FFFFFF ));
Background:-moz-linear-gradient (0% 40% 90deg, # FFF, # EEE );
-Webkit-box-shadow: 0px 0 50px # ccc;
-Moz-box-shadow: 0px 0 50px # ccc;
Box-shadow: 0px 0 50px # ccc;
}
Fieldset {border: none ;}
# User-details {
Float: left;
Width: 230px;
}
# User-message {
Float: right;
Width: 405px;
}
Input, textarea {
Padding: 8px;
Margin: 4px 0 20px 0;
Background: # fff;
Width: 220px;
Font-size: 14px;
Color: #555;
Border: 1px # ddd solid;
-Webkit-box-shadow: 0px 0px 4px # aaa;
-Moz-box-shadow: 0px 0px 4px # aaa;
Box-shadow: 0px 0px 4px # aaa;
-Webkit-transition: background 0.3 s linear;
}
Textarea {
Width: 390px;
Height: 175px;
}
Input: hover, textarea: hover {
Background: # eee;
}
Input. submit {
Width: 150px;
Color: # eee;
Text-transform: uppercase;
Margin-top: 10px;
Background-color: # 18a5cc;
Border: none;
-Webkit-transition:-webkit-box-shadow 0.3 s linear;
-Moz-border-radius: 4px;
-Webkit-border-radius: 4px;
Border-radius: 4px;
Background:-webkit-gradient (linear, 0% 0%, 0% 100%, from (# 18a5cc), to (#0a85a8 ));
Background:-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;
Box-shadow: 0px, 0px, 20px #555;
Cursor: pointer;
}
</Style>
</Head>
<Body>
<Div> http://www.999jiujiu.com/</div>
<Form action = "#">
<H1> Get In Touch With Us... <Fieldset id = "user-details">
<Label for = "name"> Name: </label>
<Input type = "text" name = "name" value = ""/>
<Label for = "email"> Email: </label>
<Input type = "email" name = "email" value = ""/>
<Label for = "phone"> Phone: </label>
<Input type = "text" name = "phone" value = ""/>
<Label for = "website"> Website: </label>
<Input type = "url" name = "website" value = ""/>
</Fieldset> <! -- End user-details -->
<Fieldset id = "user-message">
<Label for = "message"> Your Message: </label>
<Textarea name = "message" rows = "0" cols = "0"> </textarea>
<Input type = "submit" value = "Submit Message" name = "submit" class = "submit"/>
</Fieldset> <! -- End user-message -->
</Form>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
