24 beautiful personalized HTML form techniques

COMSHARP CMS writes: HTML form objects are not rendered in different browsers in a consistent way. Although some objects, such as textbox and textarea, can obtain a consistent appearance in different browsers through CSS, most other objects that cannot control appearance through CSS look very ugly in some browsers. This article selects 24 technologies to personalize form objects.

Checkbox is related to Radio Buttons

1.) FancyForm

FancyForm is a very powerful JavaScript library that can be used as a replacement for checkbox and radio buttons, can generate very beautiful checkbox and radio buttons, and supports almost all browsers. This JavaScript library requires the support of the MooTools JavaScript framework.

2.) CRIR: Checkbox & Radio Input Replacement

This JavaScript and CSS combination hides checkbox and radio buttons in forms and allows you to simulate checkbox and radio buttons using CSS settings for checkbox and radio buttons. The form's functionality will not change, and the data values ​​of checkbox and radio buttons can still be collected. The tags of checkbox and radio buttons will trigger those hidden objects.

3.) Ryan Fait's Custom Checkboxes & Radio Buttons

This JavaScript and CSS combination allows you to simulate checkbox, radio button and select list controls using your own images. This thoughtful JavaScript library can also automatically use traditional form controls when the browser disables JavaScript.

4.) ARC - Adam's Radio/Checkbox Customization

The script detects checkbox and radio buttons and their tags in the form, and once discovered, it replaces these controls with CSS-style graphical tags.

5.) prettyCheckboxes

6.) jQuery checkbox

7.) Some articles used to customize checkbox and radion buttons

• Custom Radio Button Implement With jQuery
• slayeroffice Custom Checkbox Elements
• Customized Html Controls: Creating Custom Checkbox
• Styled Form Controls
• Fancy Checkboxes and Radio Buttons
• Inside Technique: Custom Checkboxes

Select and dropdown box (Select / Dropdown Box) related

1.) JavaScript Image Combobox (JavaScript Graphic Combobox)

2.) jQuery Dropdown Check List

3.) Custom Select With Icons

4.) ComboBoxes Using MooTools

5.) Select Replacement

6.) More select box customization technology (based on JavaScript)

• mcDropdown jQuery Plug-in
• jQuery Custom Select Box v.0.01
• Arc90 Arc90
• Control.SelectMultiple

More Form control objects

1.) Custom Form Elements (CFE)

Custom Form Elements combines various technologies to enhance XHTML Web form control objects, and achieves more beautiful effects based on javaScript and CSS, improving ease of use and accessibility. Supports most mainstream browsers.

2.) Emblematiq Niceforms

Niceforms is a JavaScript library that can replace almost all web form objects. You can use the default theme, and you can even develop your own theme.

3.) jQuery Plugin: jNice

Source of this article: http://www.netwaver.com/23/24-html-form-elements-customization-techniques/