Form表单元素的美化一直都是一个比较麻烦的事情,尤其是单选和多选框,今天给力技术要推荐的Ideal Forms就是一个能解决这个问题的表单美化插件。
Ideal Forms是一个基于jQuery的轻量级表单美化插件,它具有简单易用的特点,能让你快速创建出漂亮的表单。在美化网站的同时也能让你的网站的用户体验进一步提高。它能将原始的input标签转换成圆角且带有变色效果的输入框,同时它也会将你的单选多选标签变成很漂亮的效果。
更重要的是,它没有使用任何图片,插件也提供了3个主题,你也可以自定义CSS样式以满足自己的需求。
如何使用
首先添加jQuery库、Ideal Forms插件及相关的CSS样式文件
<link href="reset.css" rel="stylesheet" type="text/css"/>
<link href="idealForms.css" rel="stylesheet" type="text/css"/>
<link href="idealForms-theme-sapphire.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-idealForms.js"></script>
添加form表单并添加元素,在每一个section区域只能放置一个input输入框
<form>
<!-- Section -->
<div>
<label>Custom</label>
<input type="text" id="One"/>
</div>
<!-- End Section -->
</form>
最后在页面加载时初始化
$('form').idealForms();