CSS Note 05: Forms

1.

1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">2 3 4 <style>5 input[type= "text"]6{7 width:150px;8 Display:Block;9 Margin-bottom:10px;Ten Background-color:Yellow; One font-family:Verdana, Arial; A} -  - input[type= "button"] the{ - width:120px; - Margin-left:35px; - Display:Block; + font-family:Verdana, Arial; -} + </style> A  at <body> -  - <div class= "About-text" > - <form class= "Contact-from" > - <input type= "text" name= "text" id= "name" placeholder= "Name:" > - <input type= "text" name= "text" id= "e-Mail" placeholder= "Tel:" > in <textarea name= "text" id= "message" cols= "rows=" 5 "placeholder=" Consulting content: "> - </textarea><br> to <button class= "send" > Confirm submission </button> + </form> - </div> the  * </body> $ 

：

2.

1 <form action= "" method= "Post" class= "Style-name" >2 3 <span>please Fill All the texts in the fields.</span>4 5 <label>6 <span>your Name:</span>7 <input id= "name" type= "text" name= "name" placeholder= "Your full name"/>8 </label>9 <label>Ten <span>your Email:</span> One <input id= "email" type= "email" name= "email" placeholder= "Valid email Address"/> A </label> - <label> - <span>message:</span> the <textarea id= "message" name= "message" placeholder= "Your message to Us" ></textarea> - </label> - <label> - <span>subject: </span><select name= "Selection" > + <option value= "Job Inquiry" >job inquiry</option> - <option value= "General Question" >general question</option> + </select> A </label> at <label> - <span>&nbsp;</span> - <input type= "button" class= "button" value= "Send"/> - </label> - </form>

: Basic Grey

3.

1 /*Basic Grey*/2 . Basic-grey{3 Margin-left:Auto;4 Margin-right:Auto;5 Max-width:500px;6 background:#F7F7F7;7 padding:25px 15px 25px 10px;8 Font:12px Georgia, "Times New Roman", Times, serif;9 Color:#888;Ten Text-shadow:1px 1px 1px #FFF; One Border:1px solid #E4E4E4; A} - . Basic-grey H1{ - font-size:25px; the padding:0px 0px 10px 40px; - Display:Block; - Border-bottom:1px solid #E4E4E4; - margin:-10px-15px 30px-10px;; + Color:#888; -} + . Basic-grey H1>span{ A Display:Block; at font-size:11px; -} - . Basic-grey Label{ - Display:Block; - margin:0px; -} in . Basic-grey Label>span{ - float: Left; to width:20%; + text-align: Right; - Padding-right:10px; the Margin-top:10px; * Color:#888; $}Panax Notoginseng . Basic-grey input[type= "text"],. Basic-grey input[type= "Email"],. Basic-grey textarea,. Basic-grey Select{ - Border:1px solid #DADADA; the Color:#888; + Height:30px; A Margin-bottom:16px; the Margin-right:6px; + Margin-top:2px; - Outline:0 None; $ padding:3px 3px 3px 5px; $ width:70%; - font-size:12px; - Line-height:15px; the Box-shadow:inset 0px 1px 4px #ECECEC; - -moz-box-shadow:inset 0px 1px 4px #ECECEC;Wuyi -webkit-box-shadow:inset 0px 1px 4px #ECECEC; the} - . Basic-grey TextArea{ Wu padding:5px 3px 3px 5px; -} About . Basic-grey Select{ $ background:#FFF url (' down-arrow.png ') no-repeat right; - background:#FFF url (' down-arrow.png ') No-repeat right); - appearance:None; - -webkit-appearance:None; A -moz-appearance:None; + text-indent:0.01px; the Text-overflow:"'; - width:70%; $ Height:35px; the Line-height:25px; the} the . Basic-grey TextArea{ the Height:100px; -} in . Basic-grey. Button{ the background:#E27575; the Border:None; About padding:10px 25px 10px 25px; the Color:#FFF; the Box-shadow:1px 1px 5px #B6B6B6; the Border-radius:3px; + Text-shadow:1px 1px 1px #9E3F3F; - cursor:Pointer; the}Bayi . Basic-grey. Button:hover{ the background:#CF7A7A the}

: Elegant Figure

CSS Note 05: Forms