HTML & CSS » 精美的表单样式插件 – Formplate 兼容所有设备！

精美的表单样式插件 – Formplate 兼容所有设备！

发表于: HTML & CSS. 评论 (1)
Sponsor

在不同的操作系统以及不同的浏览器中，网页上的表单样式都是不一样的，文本框还好，但Check box这些单选多选、以及下拉菜单，他们的样式是不好控制的，想解决这问题可以看看今天分享的精美的表单样式插件 – Formplate.

Formplate为轻量级jQuery插件，formplate.js的大小仅有4KB，扁平化风格，而且可以更换不同的颜色，下面我们看看介绍。

不同系统和浏览器测试

这里设计达人网小编分别能过MAC OS X和WIN系统的浏览器来测试，以下为截图结果。

Chrome / OS X

表单样式插件 Formplate

 

Chrome / Win

表单样式插件 Formplate

 

Friefox / Win

表单样式插件 Formplate

 

Safari / OS X

表单样式插件 Formplate

 

使用方法

STEP 1: 加载外部CSS和JS文件

除了formplate.js外，其中 jQuery 和 Modernizr 这个必须加上哦。

<head>
// Required javascript
<script src="js/min/jquery-v1.10.2.min.js"></script>
<script src="js/min/modernizr-custom-v2.7.1.min.js"></script>

// Formplate
<script src="js/min/formplate.min.js"></script>
<link href="css/formplate.css" rel="stylesheet" type="text/css">
</head>

STEP 2:  HTML代码

<div class="formplate">
<label for="text-input">Text Input:</label>
<input type="text" id="text-input" name="text-input">
</div>

// Textarea
<div class="formplate">
<textarea placeholder="Textarea"></textarea>
</div>

// Checkboxes
<div class="formplate">
<input type="checkbox" name="checkbox-1" value="checkbox-1" id="checkbox-1">
<label for="checkbox-1">Checkbox 1</label>
</div>
<div class="formplate">
<input type="checkbox" name="checkbox-2" value="checkbox-2" id="checkbox-2">
<label for="checkbox-2">Checkbox 2</label>
</div>
<div class="formplate">
<input type="checkbox" name="checkbox-3" value="checkbox-3" id="checkbox-3">
<label for="checkbox-3">Checkbox 3</label>
</div>

// Radio buttons
<div class="formplate">
<input type="radio" name="radio" value="radio-1" id="radio-1">
<label for="radio-1">Radio 1</label>
</div>
<div class="formplate">
<input type="radio" name="radio" value="radio-2" id="radio-2">
<label for="radio-2">Radio 2</label>
</div>
<div class="formplate">
<input type="radio" name="radio" value="radio-3" id="radio-3">
<label for="radio-3">Radio 3</label>
</div>

// Drop-down
<div class="formplate">
<select>
<option value="1">Select Option 1</option>
<option value="2">Select Option 2</option>
<option value="3">Select Option 3</option>
</select>
</div>

STEP 3:  JS代码

<script>
$(document).ready(function()
{
$('body').formplate();
});
</script>

更改表单的颜色

如果你不喜欢自带的蓝色，可尝试添加其它配色方案，分别为：grey, black, white, aqua, blue, green, orange, pink, purple, red, yellow, asbestos, asphalt, bondi-blue, grey-blue 和 silver。

添加如下代码即可更改：

<body data-formplate-colour="aqua">

表单样式插件 Formplate

下载和演示地址：Formplate.js
推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 、 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

+ 添加评论One Response to “精美的表单样式插件 – Formplate 兼容所有设备！”

  1. 老赵茶馆 - 回复
    2014 年 11 月 28 日 下午 4:43

    然后，下载链接！


{ 发表评论 }