Html5添加超酷响应式表单美化模板插件教程

时间：2016-01-05 12:12:50 阅读：229 评论：0 收藏：0 [点我收藏+]

标签：

一、Html结构
<form class="cbp-mc-form">
<div class="cbp-mc-column">
<label for="first_name">First Name</label>
<input type="text" id="first_name" name="first_name" placeholder="Jonathan">
<label for="last_name">Last Name</label>
<input type="text" id="last_name" name="last_name" placeholder="Doe">
<label for="email">Email Address</label>
<input type="text" id="email" name="email" placeholder="jon@doe.com">
<label for="country">Country</label>
<select id="country" name="country">
<option>Choose a country</option>
<option>France</option>
<option>Italy</option>
<option>Portugal</option>
</select>
<label for="bio">Biography</label>
<text area id="bio" name="bio"></textarea>
</div>
<div class="cbp-mc-column">
<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phone" placeholder="+351 999 999">
<label for="affiliations">Affiliations</label>
<textarea id="affiliations" name="affiliations"></textarea>
<label>Occupation</label>
<select id="occupation" name="occupation">
<option>Choose an occupation</option>
<option>Web Designer</option>
<option>Web Developer</option>
<option>Hybrid</option>
</select>
<label for="cat_name">Cat’s name</label>
<input type="text" id="cat_name" name="cat_name" placeholder="Kitty">
<label for="gagdet">Favorite Gadget</label>
<input type="text" id="gagdet" name="gagdet" placeholder="Annoy-a-tron">
</div>
<div class="cbp-mc-column">
<label>Type of Talent</label>
<select id="talent" name="talent">
<option>Choose a talent</option>
<option>Ninja silence</option>
<option>Sumo power</option>
<option>Samurai precision</option>
</select>
<label for="drink">Favorite Drink</label>
<input type="text" id="drink" name="drink" placeholder="Green Tea">
<label for="power">Special power</label>
<input type="text" id="power" name="power" placeholder="Anti-gravity">
<label for="weapon">Weapon of choice</label>
<input type="weapon" id="weapon" name="weapon" placeholder="Lightsaber">
<label for="comments">Comments</label>
<textarea id="comments" name="comments"></textarea>
</div>
<div class="cbp-mc-submit-wrap"><input class="cbp-mc-submit" type="submit" value="Send your data" /></div>
</form>

二、CSS
.cbp-mc-form {
position: relative;
}

/* Clearfix hack */
.cbp-mc-form:before,
.cbp-mc-form:after {
content: " "; display: table;
}

.cbp-mc-form:after {
clear: both;
}

.cbp-mc-column {
width: 33%;
padding: 10px 30px;
float: left;
}

.cbp-mc-form label {
display: block;
padding: 40px 5px 5px 2px;
font-size: 1.1em;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
}

.cbp-mc-form input,
.cbp-mc-form textarea,
.cbp-mc-form select {
font-family: ’Lato’, Calibri, Arial, sans-serif;
line-height: 1.5;
font-size: 1.4em;
padding: 5px 10px;
color: #fff;
display: block;
width: 100%;
background: transparent;
}

.cbp-mc-form input,
.cbp-mc-form textarea {
border: 3px solid #fff;
}

.cbp-mc-form textarea {
min-height: 200px;
}

.cbp-mc-form input:focus,
.cbp-mc-form textarea:focus,
.cbp-mc-form label:active + input,
.cbp-mc-form label:active + textarea {
outline: none;
border: 3px solid #10689a;
}

.cbp-mc-form select:focus {
outline: none;
}

-webkit-input-placeholder {
color: #10689a;
font-style: italic;
}

-moz-placeholder {
color: #10689a;
font-style: italic;
}

-moz-placeholder {
color: #10689a;
font-style: italic;
}

-ms-input-placeholder {
color: #10689a;
font-style: italic;
}

cbp-mc-submit-wrap {
text-align: center;
padding-top: 40px;
clear: both;
}

cbp-mc-form input.cbp-mc-submit {
background: #10689a;
border: none;
color: #fff;
width: auto;
cursor: pointer;
text-transform: uppercase;
display: inline-block;
padding: 15px 30px;
font-size: 1.1em;
border-radius: 2px;
letter-spacing: 1px;
}

cbp-mc-form input.cbp-mc-submit:hover {
background: #1478b1;
}

@media screen and (max-width: 70em) {
cbp-mc-column {
width: 50%;
}
cbp-mc-column:nth-child(3) {
width: 100%;
}
}

@media screen and (max-width: 48em) {
cbp-mc-column {
width: 100%;
padding: 10px;
}
}

KeyMob移动端广告平台，国内最专业的手机广告优化管理平台。平台凭借优质的资源、稳定的SDK、精准的数据分析,为应用开发者带来步步高升的收入，致力于打造一个高质、高效的广告技术服务平台。

标签：

踩

(0)

评论一句话评论（0）

key

加入时间：2016-01-05

关注此人发短消息

文章分类

默认分类（277）

“key”关注的人------（0）

“key”的粉丝们------（0）