[Original] how to change the appearance of form elements (for Webkit and IE10)

Form elements are frequently used in webpage design, such as text input boxes, single quotes, check boxes, selection lists, and file uploads. They have their own appearances in the browser, to achieve a better visual product experience and ensure the consistency of the client, the product manager usually proposes to change its appearance and use custom, for the product itself, this requirement is a plus item, and development should be strongly supported within its capacity. In H5 mobile development, most of the content can be customized, And the H5 page on the Mobile End is affected by the mobile phone system, different browser vendors have very different rendering effects on form elements.

Display the default appearances of four different form elements on iPhone 4S, meizu android4.4, and Nokia winphone8.

We can see that:

• The form input box has the default Inner Shadow.
• The single border and check boxes have default borders and selected statuses.
• Select a default drop-down arrow for the list

 

1. Use appearance to change the default webkit browser appearance

The webkit kernel browser has a private attribute "-webkit-appearance" that can change the appearance of an element. This attribute is very powerful and suitable for most tags, which is of great help to webkit page optimization.

Disable the default appearance of form input and selec Elements

{:;:;  }

For more information, see webkit-appearance. We recommend this article "Use the appearance attribute of CSS3 to change the appearance of elements", which will be explained in detail.

Ii. use pseudo elements to change the default appearance of IE10 form elements

Last month, in order to adapt to the IE 10 browser of winphone 5.0, I did some tests on IE10 compatibility and wrote the article "Meet the IE10 style compatibility of winphone 5.0, the default appearance of the previously processed IE10 form elements is to use the method with the transparency of opacity: 0 to reset the form's appearance. This method is a bit complicated and involves inputting the form content, additional processing is required. Recently, I visited the official website of the IE developer guide and learned that IE10 has added pseudo elements for the default appearance of form elements. This is also a forward looking, probably because there are few winphone users, currently, we are only compatible with webkit and are not concerned about winphone compatibility. Today we will share the next three commonly used pseudo-class elements.

 

{:;}

Disable default radio and checkbox styles

:-Ms-check applies to the modification of the default icon of the checkbox or single-choice button of a form. Multiple Attribute values are also available and set to hide (display: none) we can also use the background image to modify the desired effect.

{:;}

Disable the default Clear button in the form input box

After the content is entered in the form text input box, the text clear button is displayed.:-ms-clear applies to the modification of the clear button and is set to hide it (display: none) we can also use the background image to modify the desired effect.

{:;}

After the above three optimization items, I said goodbye to being short, poor, and icing on the cake to get cool visual effects ~

Code:

Custom form Element appearance form title text input box clear single choice button 1 single choice button 2 Check button 1 Check button 2 drop-down list box Province Guangdong BeijingView Code

Enter

Because IE11 is not installed on the computer, I don't know if Microsoft's IE11 version supports apprearance. If so, the standard is coming out, which is good for the world. If I say no, I can only say: Haha, your sister's !!!

Nowadays, mobile browser manufacturers only have prefixes-webkit and-ms. webkit has obvious advantages. Even so, we cannot ignore Microsoft winphone, after all, some users can't ignore its value. They just want to reach an agreement as soon as possible and rely on standards ~