CSS Tutorial: Controlling page form styles with pseudo elements

Article Introduction: However, all of these artifacts are dependent on a particular browser engine (so have the browser engine prefix), which makes it easy to differentiate between specific browser engines. The following is a list of pseudo elements that I have compiled myself and are available under Trident, Gecko, and WebKit browser engines. While I was writing this article, I posted some webkit artifacts, so now

The form style is a headache when developing Web applications. In the past, Web developers had to accept the fact that the client browser controls the form style. However, the author adds hooks to the Web rendering engine through pseudo elements to control the display of the form.

However, all of these artifacts are dependent on a particular browser engine (so have the browser engine prefix), which makes it easy to differentiate between specific browser engines. The following is a list of pseudo elements that I have compiled myself and are available under Trident, Gecko, and WebKit browser engines. In my writing this article at the same time, published a number of WebKit pseudo elements, so now the pseudo element is basically unified. I don't know the Presto engine provides any form of pseudo element.

Some attention points:

All pseudo elements listed here are supported by IE10, but they are not supported in earlier versions of IE

For WebKit, set some pseudo element style, you must-webkit-appearance the element to none. For example, set::-webkit-progress-bar style, you must give <progress> element application-webkit-appearance:none;

Directory

• <input> elements
  • button
  • checkbox/radio< /font>
  • color
  • date
  • file
  • number
  • password
  • placeholder Properties
  • range
  • reset
  • search
  • text
• Other elements
  • button
  • Keygen
  • Meter
  • Progress
  • Select
  • TextArea
• Other
  • Form validation Messages

Input[type=button]

Gecko

View <button>

Input[type=checkbox]/Input[type=radio]

Trident

The IE Browser engine provides::-ms-check pseudo elements to control the style of the Radio check box. For example:

::-ms-check {   color:red;   Background:black;   Padding:1em; }    

This is the effect in the IE10 of Win8:

Input[type=color]

Webkit

WebKit provides two pseudo elements for color selection::-webkit-color-swatch-wrapper and::-webkit-color-swatch. You can apply a variety of rules to these elements, but I haven't figured out any good ideas to use them. Here is a simple demonstration.

<input type= "Color" >    

::-webkit-color-swatch-wrapper {    border:2px solid red;  }::-webkit-color-swatch {    opacity:0.5;  }    

This is the result of chrome26 under the Apple system:

Input[type=date]

Webkit

The following 8 pseudo elements are webkit specifically for custom input dates:

• ::-webkit-datetime-edit
• ::-webkit-datetime-edit-fields-wrapper
• ::-webkit-datetime-edit-text
• ::-webkit-datetime-edit-month-field
• ::-webkit-datetime-edit-day-field
• ::-webkit-datetime-edit-year-field
• ::-webkit-inner-spin-button
• ::-webkit-calendar-picker-indicator

The following are the internal structures of these elements:

If you want to enter your date using more space and colorful colors, you add the following styles:

<input type= "Date" >    

::-webkit-datetime-edit-year-field {color:purple;}

::-webkit-calendar-picker-indicator {background:orange;}    

The Chrome26 on the Apple system appear as follows:

Input[type=file]

When we write <input type= "file", all the render engines automatically create a button. Previously, this button was completely unable to set the style. However, recently IE and WebKit have been able to add styles to them through pseudo elements.

Trident

IE10 can use the::-ms-browse pseudo element to add a style to the <input type= "file" > button, and any style added to the normal button can be applied to the pseudo element. For example:

<input type= "File" >    

::-ms-browse {   background:black;   color:red;   Padding:1em; }   

The IE10 shown in Win8 are as follows:

Webkit

WebKit uses::-webkit-file-upload-button pseudo elements Add styles to <input type= "File" > buttons, and any style added to a normal button can be applied to pseudo elements. For example:

<input type= "File" >    

::-webkit-file-upload-button {   background:black;   color:red;   Padding:1em; }    

The Chrome26 on the Apple system appear as follows:

Input[type=number]

Webkit

WebKit provides a Drop-down list control through the default number selector. Pseudo elements::-webkit-textfield-decoration-container,::-webkit-inner-spin-button and::-webkit-outer-spin-button provides custom style. Although it is not possible to do too much control over such elements, it can at least be hidden away.

<input type= "Number" >    

::-webkit-textfield-decoration-container {}::-webkit-inner-spin-button {

  -webkit-appearance:none; }    

This is the display of the CHROME26 under the Apple system.

Input[type=password]

Trident

The Trident engine provides a control for a password-entry box that allows him to display plain text. And this control is through::-ms-reveal operation. You can modify this control to include the font color, background color, or display hidden effects. The following are hidden effects

<input type= "Password" >    

::-ms-reveal {display:none;}    

This is the display effect of the IE10 under the WIN8 system:

Placeholder Property

Gecko

The Firefox engine uses pseudo elements::-moz-placeholder controls the text style of the placeholder. You can use him to change the font color and font properties within placeholders. For example:

<input placeholder= "Placeholder" >    

::-moz-placeholder {   color:blue;   Font-family: "Comic Sans MS"; }    

This is the result of the firefox20 in the Apple system.

Note: Firefox engine from:-moz-placeholder in Firefox version 19 to::-moz-placeholder

Trident

The Trident engine sets the style for a pseudo class provided by the placeholder text instead of a pseudo element. But pseudo class:-ms-input-placeholder, other rendering engine can replace with other pseudo elements

<input placeholder= "Placeholder" >    

:-ms-input-placeholder {   color:blue;   Font-family: "Comic Sans MS"; }    

IE10 display effect of WIN8 system:

Webkit

WebKit engine uses::-webkit-input-placeholder, he can also modify the font color and font properties of placeholders

<input placeholder= "Placeholder" >    

::-webkit-input-placeholder {   color:blue;   Font-family: "Comic Sans MS"; }    

This is the result of the firefox20 in the Apple system.

Input[type=range]

Gecko

Firefox in the Firefox22 version provides::-moz-range-track and::-moz-range-thumb to set the style of the range element. You can apply as many styles as possible to him. For example:

<input type= "Range" >    

::-moz-range-track {   border:2px solid red;   height:20px;   

::-moz-range-thumb {   background:blue;   height:30px; }    

The display effect of Firefox22 under OS X:

Trident

The IE engine provides a great set of pseudo elements for customizing the range element style:

• ::-ms-fill-lower: Front of track handle
• ::-ms-fill-upper: Behind the track handle
• ::-ms-ticks-before: Before tracking tick mark range
• ::-ms-ticks-after: After tracking tick mark range
• ::-ms-thumb: Handle
• ::-ms-track: Track
• ::ms-tooltip: Displays the tool when the user selects a range element. Note that this element cannot be styled and can only be hidden with display.

The following is a simple example of a horizontal range element. As follows:

<input type= "Range" >    

::-ms-tooltip {display:none/* display and visibility only */}    

The effect of IE10 under Win8

Webkit

WebKit for range elements::-webkit-slider-runnable-track and::-webkit-slider-thumb, however can't add too many styles to them, you can add some color and leave white

<input type= "Range" >    

::-webkit-slider-runnable-track {   border:2px solid red;   Background:green;   

::-webkit-slider-thumb {   outline:2px solid blue;}   

The effect of Chrome26 under OS X

For a range element, it is important to note that the IE engine and WebKit allow the styles to be applied across the state (they are::-webkit-slider-thumb:hover and::-ms-thumb:hover) and the Firefox engine is temporarily unsupported

Input[type=reset]

View <button>

Input[type=search]

Webkit

WebKit default provides a custom UI with a cancel and search button for the search box. ::-webkit-search-cancel-button and::-webkit-search-results-button can provide custom style, but you can't do more than hide like the following

<input type= "Search" >    

/* Remove the rounded corners * * Input[type=search] {-webkit-appearance:none;}  

::-webkit-search-cancel-button {-webkit-appearance:none;}  

::-webkit-search-results-button {-webkit-appearance:none;}    

The effect of Chrome26 under OS X

Input[type=submit]

Gecko

View <button>

Input[type=text]

Trident

IE10 uses::-ms-value provides styles for text entry boxes (text entry boxes, password entry boxes, and so on) and Drop-down lists. For example:

<input type= "text" value= "value" > <input type= "password" value= "value" > <select>   

<option selected>option</option> </select>    

::-ms-value {   color:red;   Background:black;   Padding:1em; }    

The effect of IE10 under Win8

Clear control

A small x appears on the right side of the text box when the text input box in IE10 gets focus and is not empty. When you click on him, the contents of the text box will be emptied. The style of the small x is controlled by::-ms-clear pseudo-element, so you can hide it.

<input type= "Text" >    

::-ms-clear {display:none;}    

The effect of IE10 under Win8

There is a simplified rule::-ms-clear, so you will see this:

<input type= "text" value= "Lorem ipsum" >    

::-ms-clear {   color:red;   Background:black;   Padding:1em; }    

It shows the effect as follows:

<button> Element

Gecko

Firefox applies pseudo elements::-moz-focus-outer and::-moz-focus-inner to input type is button,reset, and submit, and button element set style.

You may not be able to do many things with these artifacts, but the important thing is that Firefox can use them to add border and padding

Button::-moz-focus-inner, input[type= "reset"]::-moz-focus-inner, input[type= "button"]

::-moz-focus-inner, input[type= "Submit"]::-moz-focus-inner, input[type= "file"] > input[type= "button"]

::-moz-focus-inner {   border:1px dotted transparent;   padding:0 2px; }    

These rules make it easy to create different skins for the button display on Firefox and other rendering engines. This is a confusing thing that actually takes a way to get rid of them. This method has been in the beginning since 2002.

The default padding and border can be reset to 0

Button::-moz-focus-inner, Input::-moz-focus-inner {   border:0;   padding:0; }    

The firefox19 of the Apple system shows the following effects:

<keygen> elements

Webkit

WebKit provides::-webkit-keygen-select, which can be used to register element custom Drop-down styles, for example:

<keygen>    

::-webkit-keygen-select {   background:black;   color:red; }    

Chrome26 display effect in OS X:

<meter> elements

Webkit

WebKit offers::-webkit-meter-bar,::-webkit-meter-even-less-good-value,::-webkit-meter-optimum-value, and::- Webkit-meter-suboptimal-value is used to display styles for meter elements.

To apply these pseudo element settings, you must set the-webkit-appearance to none on the meter element.

::-webkit-meter-even-less-good-value,::-webkit-meter-optimum-value, and::-webkit-meter-suboptimal-value only one of them, is activated at a given time based on the value of meter.

See the following example:

<meter low= "high=" "max=" "optimum=" value= "" >E</meter>    

::-webkit-meter-bar {   height:50px;   Background:white;   

::-webkit-meter-even-less-good-value {background:blue;}    

Chrome26 display effect in OS X:

<progress> elements

Webkit

WebKit offers::-webkit-progress-inner-element,::-webkit-progress-bar, &::-webkit-progress-value for progress bar style, Their hierarchical relationship is as follows:

Like meter, in order to apply styles to these elements, you must set-webkit-appearance:none for the progress bar element;

<progress max= "value=" ></progress>    

::-webkit-progress-value {background:red;}    

Chrome26 display effect in OS X:

Gecko

Gecko provides the progress bar::-moz-progress-bar to set the style. For example:

<progress max= "value=" ></progress>    

::-moz-progress-bar {background:red;}    

Firefox19 display effect in OS X:

Trident

Like Firefox, IE provides a single pseudo element to the progress bar::-ms-fill, for example:

<progress max= "value=" ></progress>    

::-ms-fill {background:red;}    

IE10 display effect in WIN8:

<select> elements

Trident

IE10 provides::-ms-expand the arrow style used to modify the Drop-down list. For example:

<select>     <option selected>one</option> </select>    

::-ms-expand {   padding:2em;   color:red;   Background:black; }    

IE10 display effect in WIN8:

<textarea> elements

Webkit

WebKit provides::-webkit-resizer for elements that can automatically control dimensions, add it to the lower-right corner of the text field.

He could use a display:none or-webkit-appearance:none: Hide it.

<textarea></textarea>    

::-webkit-resizer {   display:none;}    

Chrome26 display effect in OS X:

Note::-webkit-resizer adding Display:none does not prevent users from modifying textarea dimensions, he simply hides control. If you disable resizing, you can set CSS properties Resize:none. Not only can you hide the control, you can also disable text field resizing in all browsers.

Use::-webkit-resizer can also add some basic styles. If you want to use more colors you can add this:

<textarea></textarea>    

::-webkit-resizer {   border:2px solid black;   background:red;   box-shadow:0 0 5px 5px Blue;   OUTLINE:2PX solid yellow; }    

Chrome26 display effect in OS X:

Form validation Information

Webkit

WebKit is the only rendering engine that supports the constraint validation API to create validation bubbles. The pseudo elements provided are as follows:

• ::-webkit-validation-bubble
• ::-webkit-validation-bubble-arrow
• ::-webkit-validation-bubble-arrow-clipper
• ::-webkit-validation-bubble-heading
• ::-webkit-validation-bubble-message
• ::-webkit-validation-bubble-text-block

It's easy to see that each element can have visual effects, and here's an example:

::-webkit-validation-bubble {    padding:1em;    Background:orange;  

::-webkit-validation-bubble-arrow {    background:blue;  

::-webkit-validation-bubble-arrow-clipper {    border:2px solid black;  

::-webkit-validation-bubble-heading {    background:green;  

::-webkit-validation-bubble-message {    color:white;    Background:purple;  

::-webkit-validation-bubble-text-block {    border:1px solid red;    padding:1em;  }    

Chrome26 display effect in OS X:

This is a more practical example, showing the tip box effect:

::-webkit-validation-bubble-message {   color: #eee;   

::-webkit-validation-bubble-arrow {   background:black;   Border-color: #444;   Box-shadow:none; }    

Chrome26 display effect in OS X:

That's it!

I hope you see these lists to help you. If I don't have the element or part of the information that is out of date, I hope you can tell me in the comments.

Extended Reading

1. The current state of HTML5 Forms
2. Mozilla CSS Extensions
3. Trident vendor-prefixed Pseudo Elements
4. WebKit ' s current user agent stylesheet
5. Slightly dated guide from WebKit on styling form controls
6. Webkit Pseudo-element Selectors (Shadow DOM Elements)
7. Creating Cross Browser HTML5 Forms Now, Using Modernizr, WEBFORMS2 and Html5forms
8. A FORM of Madness
9. HTML5 Inputs and attribute support

Specially recommended--webkit CSS Library

Webkit CSS Library is a ctripued team collation of a manual on the private nature of Webkit, easy to query and use.

--Desert

Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!