# ===================== # = Custom Forms v1 = # ===================== I wrote this after trying a lot of form beautifiers. Don't get me wrong, plugins like Uniform.js are great. However, I'm lazy and I don't like building complicated sprites or giving fixed widths to every element. I know it's not the most lightweight plugin out there; it requires a full 20kb between js, styles and a png. But it does the job for me :D I'm not a very good designer so I took the designs from Fireworks Lab, be sure to check them out. http://fireworkslab.com/2011/05/03/light-ui-set/ More method and customization options are on the way. Feel free to use it or send feedback. # ============ # = Features = # ============ - Checkbox & Radios - Painless styling, no arcane mark-up or anything. Your checkbox gets subtituted for an inline-block span. - Selects - Full CSS styling, no more complicated sprites. - Seamless subtitution, the replacement mark-up will have the same size as your original selects. - Native select behavior # ========= # = Usage = # ========= <input type="checkbox" id="custom_checkbox_0" name="ids[]" value="0"/> <label for="custom_checkbox_0">Checkbox 0</label> <input type="radio" id="name_0" name="name" value="0"/> <label for="name_0">Radio 0</label> <select id='select_1' name="select_1" class="custom_select"> ... </select> <script type="text/javascript" charset="utf-8"> var inputs = $("input[type=checkbox],input[type=radio], select").custom_form(); </script> # Replacement mark-up <span class="checkbox"><input type="checkbox" id="custom_checkbox_0" name="ids[]" value="0"></span> <label for="custom_checkbox_0">Checkbox 0</label> <span class="radio"><input type="radio" id="name_0" name="name" value="0"></span> <label for="name_0">Radio 0</label> <span class="select" style="width: 76px; "> <span class="select_content"> <span class="select_button"> <span class="select_button_icon"></span> </span> <p class="select_label" style="width: 50px; padding-right: 0px; ">Option 1</p> </span> <select id="select_1" name="select_1" class="checkboxes" style="width: 76px; "> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> </select> </span> # =========== # = Options = # =========== responsive_select: If true selects will be given the class .responsive_select which width is 100% responsive_select: If true inputs with type file will be given the class .responsive_file which width is 100% file_label: The label for inputs with type file (default: No fie chosen) file_label: The button text for inputs with type file (default: Choose file) # ============ # = Browsers = # ============ IE7+, FF5, Chrome 13.0.782.220, Safari 5 # =========== # = Roadmap = # =========== - Style refactoring to remove duplicates - JS refactoring to reduce file size # ============= # = Changelog = # ============= 06-11-2011 Browser information in class. Completely rewritten opacity styles. Selects have a weird behavior in IE, if their opacity is 0 it requires a double-click instead of a click to open. So I added the .not_msie class to apply opacity styles to compliant browsers and deliver opacity with filters for all msie versions (including ie9). If IE10 supports filters or doesn't have this behavior, specific classes to target ie9< could be added instead of not_msie 01-11-2011 Tab navigation enabled,corrected disabled behavior and modified custom styles for selects 29-10-2011 Active classes such as .active_checkbox and .active_radio now reference the :active state. Checked states are now given classes like .checked_checkbox and .checked_radio