jquery输入框颜色选择器

1、新建html文档。

2、书写hmtl代码。<div class="clearInputStyle"><input id="color1" class="iColorPicker" type="text" value="#fff467" /> <hr /><input id="color2" class="iColorPicker" type="text" value="#ff0" /> <hr /><input id="color3" class="iColorPicker" type="text" value="#f7941d" /> <hr /><input id="color4" class="iColorPicker" type="text" value="#a36209" /> <hr /><input id="color5" class="iColorPicker" type="text" value="#7b3000" /></div><h2><strong>How to Use It?</strong></h2>

3、书写css代码。.btn_default { background-color: #c9c9c9; }.btn_default, .btn_primary { color: #fff; padding-left: 70px; padding-right: 70px; border: 0 none; }.btn_primary { background-color: #3caf36; }.btn_smart { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; }.btn_send { background-color: #fff; color: #222; padding-left: 30px; padding-right: 30px; }.btn_send:hover { background-color: #f8f8f8; }.vm_item { display: table-cell; vertical-align: middle; word-wrap: break-word; word-break: break-all; }.vm_item_default { white-space: nowrap; }.vm_item_primary { width: 2000px; }.bubble { max-width: 500px; min-height: 1em; display: inline-block; vertical-align: top; position: relative; text-align: left; font-size: 14px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin: 0 10px; }.bubble.bubble_default { background-color: #fff; }.bubble:after, .bubble:before { position: absolute; top: 14px; border: 6px solid transparent; content: " "; }.bubble.left:after, .bubble.left:before { right: 100%; }

4、书写并添加js代码。<script src="js/jquery-1.3.1.min.js"></script><script src="js/iColorPicker.js"></script>

5、代码整体结构。

6、查看效果。