Put a beautiful coat on a native form control

Fufu: In the Internet mature today, everyone's requirements for the site not only in the functional realization, but also began to pay attention to visual design, multi-user experience and so on. form controls are important elements on a Web page and are highly functional. Interactive designers for it to design a more convenient way of operation, visual designers will also rack their brains to design a more eye-catching visual display. However, because of the limitations of the form control itself, can not be a good custom appearance, so the birth of a series of intelligent front-end students to simulate the genuine form control.

Let's start with a real "chestnut".

Visual designers provide a design draft:

As a front-end classmate, I received the manuscript for a moment, in fact, a variety of internal ideas interwoven:

This design is very good-looking, just need to simulate the control, it seems to cut the diagram, the pull effect is to simulate, the most important thing is to consider compatibility, in addition to finish also leave detailed document interpretation used to communicate with the team.

Such simulations need to ensure that the performance and usability of the Web site are balanced with the implementation of the design. I couldn't help but miss the primitive form controls that seemed trivial but very practical. If you use them, you can almost solve all of the above problems.

First, to convince designers to use native controls, native control benefits a basket

We evaluate a Web product from the dimensions of aesthetics, ease of use, usability, pleasure, loyalty, and beauty is one of them, but better function implementation and higher efficiency will be more conducive to a pleasant user experience than flashy design.

1.1 Save team communication cost

Native control of its own rich properties, such as radio, check box of the optional State, the input box can not enter the state, and so on, the direct development of use, rather than analog control, need to use style simulation, increase the workload while increasing the communication costs of each link.

1.2 Compatibility

Using native controls has very high compatibility with each browser, and the form controls display the corresponding visual style based on the default settings of each browser, as well as the default corresponding changes in the actual different states. This effectively avoids the decision and control of position, state, etc. in the impersonation control.

1.3 Availability

Caring for people with disabilities is our social responsibility, and as front-end developers, we are also committed to providing a better Internet experience for people with disabilities. Native control features better support for keyboard operations, tab switching, shortcut keys and other functions, so as to help visually impaired users to use the screen software, and so on accessibility tools to Web Access.

1.4 Experience Consistency

In addition, cross-platform development, such as in the increasingly hot mobile end of the development, the native control can invoke the browser to call the mobile phone control, to ensure cross-platform experience consistency, but also adapt to the response design, compatible with a variety of terminal equipment.

1.5 Aesthetic Nature

Still worried about not being able to customize the appearance of native form controls? WebKit gives us this possibility, which allows you to redefine the appearance of controls so that they are as beautiful as the design manuscript. The following example tells you.

Second, the native control can also be very beautiful, the original control of the case

Use native control to use the original HTML form control structure, customize the control with CSS, and change its appearance. Here are a few examples where we look at some of the relevant attributes that can be customized to explore possible possibilities for future customization.

Example 1: Drop down menu

Here we can define a common CSS method that defines the width, height, border, and background of a drop-down box, as well as a picture of a Drop-down button. Here to facilitate processing, the use of Base64 pictures.

Tip: The style of the Drop-down menu only supports defining the font size temporarily.

Example 2: Radio box

The radio box can also be changed to include attributes such as width, height, background picture, and so on. Here in order to save the flow, the pictures of several states are merged into Sprite chart. From the perspective of the diagram, depending on the intrinsic properties of the radio box itself, it is convenient to implement a state that is not available when checked and unchecked, and does not have to worry about compatibility issues.

Example 3: check box

The check box is very similar to the one, we can get the effect we want by defining the properties of width, height, background picture, and so on. You can also use your own properties to achieve clickable, clickable, checked, and unchecked settings.

Example 4. In fact, you can make it look better.

A few of these examples are small visual changes based on native controls, but we can do it more beautifully. The graphic design below is a group of controls that look like the radio box at first glance, which, through the phenomenon, can only choose one space at a time, which is the design of a single marquee control. So we use the one-box as the basis to change their display to make it look like the following.

This group has been used in our project and it does not look very special. There will be more in the future. The default style of the form design we can also try.

Third, a beautiful coat or a "King's new Dress"

Unfortunately, because the non-WebKit kernel browser does not support this custom operation, some users, including the large domestic browser IE version of the lower user or can not experience this beautiful control. Practical and beautiful balance for the product is of course very important, sometimes discard some visual effects more practicality may be in exchange for a more favorable experience, and with the development of technology, customization more and more flexible, browser support for its more and more good, from this point of view, Maybe we can use some native form controls more in the future.