Pseudo-element form control default style reset and custom Daquan

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=3381

This document refers to the list of pseudo-elements to Style Form Controls from TJ Vantoll.

If you want to see the original translation, you can step here: pseudo-element control form style.

I have all the effects here to recreate the demo test, identify the authenticity, look at the differences in the window environment and some other attributes support, and then, add, record, Memo.

You may now feel the toss of these things are not practical, after a 1-2 years, may be a treasure, remember here, timely come to see, there will be another harvest.

As time goes by, browsers are bound to be more and more pseudo-elements, so there will be occasional updates, and of course, the frequency will not be as frequent as the great aunt.

First, the index

Because of the involvement of multiple browsers, so the content is quite a lot, there is an index is very necessary, in order to save height, horizontal arrangement, hope also accustomed to.

• <input> elements
  • button
  • Checkbox/radio
  • Color
  • Date
  • File
  • Number
  • Password
  • Placeholder Property
  • Range
  • Reset
  • Search
  • Submit
  • Text
• Other elements
  • button
  • Keygen
  • Meter
  • Progress
  • Select
  • TextArea
• Miscellaneous
  • Form Validation Tips

B. <input> elements

Input[type=button]
See the <button> elements in the "other elements" section

Input[type=checkbox]/Input[type=radio]
The Trident kernel, which is what we often call IE (the pseudo-elements under all IE are referred to as ie10+ browsers), use ::-ms-check the UI that can change the single check box. The following CSS code and HTML code:

::-ms-check {    color: #34538b;    Background: #a0b3d6;    padding:. 5em;}

<input type= "Radio"/><input type= "checkbox"/>

As a result, the effect in Window7 IE10 is this:

Input[type=color]
Currently IE10 and FireFox21 are not supported, and naturally there is input[type=color] no response to the pseudo element support, Chrome browser can, which provides two pseudo-elements used to change the default style: ::-webkit-color-swatch-wrapper as well ::-webkit-color-swatch .

In general, the control effect of the form in HTML5 is created by the browser Shadow Dom , out of the main tree of the document, not affected by the large environment CSS, to control its UI can only use the browser development of the pseudo-element API interface. Like the input[type=color] default UI effect in chrome above (see below) is actually a two-layer div, and then the browser comes with some CSS control effect.

And the two above can be used pseudo-element is pointing to the double div, we can use this to apply a part of the CSS style to reset, remember that only some of the style can be reset. And these pseudo-element CSS we can not use the browser's own development tools to see, because it does not belong to the document tree, just behind a subtree.

For example, here we can use pseudo-elements, apply a specific style, and let the two-level div end up together, like this:

The CSS code is as follows:

::-webkit-color-swatch-wrapper {    border:1px solid #777;    Background-image:-webkit-gradient (linear, 0 0, 100% 0, from         (red),         color-stop (15%, Orange),         color-stop ( 30%, yellow),         color-stop (50%, Green),         color-stop (65%, Darkcyan),         color-stop (80%, Blue), to         (purple) );}::-webkit-color-swatch {height:21px; position:relative; left:40px; top:-5px;}

<input type= "Color" >

Input[type=date]
Chrome is still the protagonist, and currently WebKit has the following 8 pseudo-elements that can change the UI of a date control:

• ::-webkit-datetime-edit– Controls the editing area
• ::-webkit-datetime-edit-fields-wrapper– Control of the area of the month and day
• ::-webkit-datetime-edit-text– This is the control of the slash or dash between month and day
• ::-webkit-datetime-edit-month-field– Control Month
• ::-webkit-datetime-edit-day-field– Control of specific days
• ::-webkit-datetime-edit-year-field– Control year text, such as 20,134 letters occupy the place
• ::-webkit-inner-spin-button– This is the control of the small arrow below the
• ::-webkit-calendar-picker-indicator– This is the control of the small drop-down arrow

The internal structure that the original author did not know where it came from is the shadow Dom mentioned above:

Added on 2013-06-08
Thanks to @ethanchen, Shadow Dom can be viewed in a few steps below.

Under Chrome, F12 opens the developer Tools panel with a gear image in the bottom right corner, click:

In the expanded panel, tick "Show shadom DOM" to:

<– Update End –>

The date type text box for the default left effect, when applied with the following CSS pseudo-element style, becomes:

::-webkit-datetime-edit {padding:1px; Background:url (/study/image/selection.gif);}::- Webkit-datetime-edit-fields-wrapper {background-color: #eee;}::-webkit-datetime-edit-text {color: #4D90FE; padding: 0.3em; }::-webkit-datetime-edit-year-field {color:purple;}::-webkit-datetime-edit-month-field {color:blue;}::- Webkit-datetime-edit-day-field {color:green;}::-webkit-inner-spin-button {visibility:hidden;}::- Webkit-calendar-picker-indicator {    border:1px solid #ccc;    border-radius:2px;    Box-shadow:inset 0 1px #fff, 0 1px #eee;    Background-color: #eee;    Background-image:-webkit-linear-gradient (Top, #f0f0f0, #e6e6e6);    Color: #666;}

Personally think of the 8 pseudo-class, the most practical is to use: ::-webkit-inner-spin-button { visibility: hidden; } Remove the designer nasty up and down the small arrows.

Added on 2013-06-27
It seems that the date type text box under Chrome now has a fork to clear the effect of the content, the pseudo-element is ::-webkit-clear-button , to clear, you can use the following code:

::-webkit-clear-button {     -webkit-appearance:none;}

Input[type=file]
File upload space, IE10, and chrome have pseudo-elements to get into the type of control, from which browser to start good? First IE10 the browser bar (same as below).

Ie10+ Browser uses pseudo- ::-ms-browse elements, you can change the button shape of the border, background color, height ah, and the like, the following example CSS code:

::-ms-browse {    padding:. 4em;    line-height:24px;    / * The cursor is centered vertically */    border:1px solid #a0b3d6;    Background: #f0f3f9;    Color: #34538b;}

It turned out to be the following--like Zhengshuang--the girl became a young woman:

IE browsers always go their own way, let others scold. Obviously, Chrome uses a different, pseudo-element, ::-webkit-file-upload-button similar to the effect of CSS, as follows:

::-webkit-file-upload-button {    padding:. 4em;    line-height:30px;    border:1px solid #a0b3d6;    Background: #f0f3f9;    Color: #34538b;}

Look at Chrome's facelift:

This......

Input[type=number]
Currently WebKit browser alone, the following three pseudo-elements can be used to manipulate:

• ::-webkit-textfield-decoration-container–input interior, up and down arrows, and external containers filled with values
• ::-webkit-inner-spin-button– A little button up and down chrome
• ::-webkit-outer-spin-button– I don't know what to do with a browser fire.

From a usage perspective, the following code is most useful:

::-webkit-inner-spin-button {     -webkit-appearance:none;    / * up and down the small arrow buttons, you are too ugly, rolling, negative points */}

For the again set up:

::-webkit-textfield-decoration-container {    background-color: #f0f3f9;}

The effect is compared to the default effect:

Input[type=password]
Remember IE10 just came out, someone shouted: Ah ah ah, IE10 text box after entering the text has a fork ah; Ah ah, the password box after the input of the eyes ah, oh ah ah, how to remove AH?

I personally think the eyes are not very good, why do you want to erase it?

I suddenly remembered a song: "You do not look at me like this, my face will become red apples ...". Estimate everyone is shy, be ie mm eyes stare at embarrassed, so just want to remove.

passwordthe removal of the type input box of the eye requires the use of pseudo-elements ::-ms-reveal , which we can use to display control the explicit, or to visibility use color , background control styles.

When we use the background control background, ie browser itself holder The black border style will automatically disintegrate, using the system same strain text box UI, as shown in:

If you do not have IE10 browser, brother, go out 500 meters right is the moat, you can jump down-awake. I'm trying to get some access to our main station today, Yo, IE10 the number of users more than my imagination, but also old to speak in Shanghai, is "old stick to", do not confuse confused still in tossing IE6, embrace the future, embrace change, gogogo!

Placeholder Property
Haha, the attributes seem to be more popular than the type, rare flowers and schools of contention, Firefox browser this time also has a debut!

The following HTML code:

<input placeholder= "occupying seat"/>

Each browser is on the turn ~ ~

First look at IE browser, :-ms-input-placeholder a look is placeholder the abuse of attributes, to a discoloration ①+ indentation, when when when:

:-ms-input-placeholder {    color:mediumvioletred;    text-indent:5px;}

ZXX: The color mediumvioletred is taken from the "147 color names and corresponding color values under the CSS3" article.

So:

And then chrome, whoa, this is on, IE and Chrome are on the same line, the pseudo-elements are: ::-webkit-input-placeholder . Berthelot the difference between a private prefix, like a code:

::-webkit-input-placeholder {    color:mediumvioletred;    text-indent:5px;}

Similar effects:

For the first time in the Firefox browser, the pseudo-element is ::-moz-placeholder that this pseudo-element is said to be supported after Firefox 19, before the use of :-moz-placeholder pseudo-class.

CSS Code walk:

::-moz-placeholder {    color:mediumvioletred;    / * No use */    opacity:1!important;}

The transparency of placeholder text under Firefox browser by default 0.54 , at least I window7 Firefox 21, so you need to force the opacity: 1 placeholder value color to match the ie/chrome.

Input[type=range]
IE, Chrome, Firefox this round has appeared. The HTML test code is the same, very simple, just one range control:

<input type= "Range"/>

The Internet Explorer pseudo-elements are relatively complex:

• ::-ms-fill-lower: The area that has been dragged
• ::-ms-fill-upper: No area to drag
• ::-ms-ticks-before: tick marks in front/above
• ::-ms-ticks-after: Tick marks at the back and below
• ::-ms-thumb: Block block in Middle drag
• ::-ms-track: Dragging a track
• ::ms-tooltip: Drag to display the text or something. Note that this element can only be used display:none as a hidden style.

The following settings:

WebKit cores, such as chrome, use pseudo-elements as the ::-webkit-slider-runnable-track and ::-webkit-slider-thumb . The former refers to the "running trajectory", that is, the elements, the latter refers to which of the protruding small knot to drag. Apply the following CSS:

::-webkit-slider-runnable-track {    border:1px solid #a0b3d6;    Background: #f0f3f9;}::-webkit-slider-thumb {    outline:1px dotted #a0b3d6;    Background-color: #34538b;}

The effect is as follows, window 7:

We can also use ::-webkit-slider-runnable-track:hover and ::-webkit-slider-thumb:hover implement mouse effects (available in the demo).

For the Firefox browser, it is said that the effect in Firefox 22, I am currently Firefox 21, as if it is the latest version, so no effect (after a month to view the demo may be effective), the code is as follows:

::-moz-range-track {    border:1px solid #a0b3d6;    height:20px;    Background: #f0f3f9;}::-moz-range-thumb {    background: #34538b;    height:30px;}

Input[type=reset]
See also <button> elements

Input[type=search]
At present, there are small achievements in chrome, two pseudo-elements: ::-webkit-search-cancel-button and ::-webkit-search-results-button , the former controls the input text after the fork, the latter control Magnifier. The following code can kill them all!

/* Strip fillet */input[type=search] {-webkit-appearance:none;} / * Hide Cancel button */::-webkit-search-cancel-button {-webkit-appearance:none;} / * Hide Magnifier */::-webkit-search-results-button {-webkit-appearance:none;} 

Input[type=submit]
See also <button> elements

Input[type=text]
Under the Ie10+ browser, ::-ms-value You can change type=text type=password select The style of the text box (such as, etc.) and the drop-down box () by providing a pseudo-element. For example, the following HTML code:

<input type= "text" value= "Ya Mei Butterflies Can you be a little bit deeper" ><input type= "password" value= "Ya mei Butterfly Can you be a little bit deeper" ><select>< Option selected> Yami butterfly can you be a little bit deeper </option></select>

Match the following CSS:

::-ms-value {    padding:4px;    Color: #34538b;    border:1px solid #a0b3d6;    Background-color: #f0f3f9;}

So, "Butterfly flies!" It's like a childhood running in the wind.
I feel the rainbow is far higher than the sea
Butterfly flies! Fly to the castle of the future
Open the skylight of the dream to make it grow faster and better ... "

Ie10+ also provides pseudo-elements ::-ms-clear that can change or hide the close forks at the end of the Ie10+ browser text box.

Hide as follows:

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

Of course, we can also use border , background etc to control its UI, such as the following effect:

Third, other elements

<button> elements
This section, currently, looks like only Gecko Kernel browser has related processing, two pseudo elements, ::-moz-focus-outer and ::-moz-focus-inner , primarily for button type elements, including button type, reset type, and submit type.

For example, use border the two pseudo-elements to render:

Button::-moz-focus-inner,input::-moz-focus-inner {    border:5px solid #34538b;} Button::-moz-focus-outer,input::-moz-focus-outer {    border:5px solid #cad5eb;}

But these individuals don't think it's a good use. In addition to some geek cases, it may be useful to have some resets, as border with padding :

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

<keygen> elements
WebKit under the pseudo element can be controlled, for ::-webkit-keygen-select , the following settings:

::-webkit-keygen-select {    border:1px solid #a0b3d6;    Background-color: #f0f3f9;    Color: #34538b;}

<keygen>

<meter> elements
<meter>Used for measurement, scoring, and so on. The following pseudo-elements are controlled under the WebKit:

• ::-webkit-meter-bar– Strips
• ::-webkit-meter-optimum-value– Part of the area when the score is good
• ::-webkit-meter-suboptimal-value– Score at the time
• ::-webkit-meter-even-less-good-value– Bad score when zone state

The following HTML and CSS code:

<meter low= "" "High=" "max=" "optimum=", "value=" > Excellent </meter><meter low= "" "High=" "max=" "Optimum=" "value=" > Liang </meter><meter low= "the" "High=" "max=", "" "Optimum=", "" "value=" > Difference </meter>

. deal meter {-webkit-appearance:none;}.::-webkit-meter-bar {    height:1em;    Background:white;    border:1px solid Black;}::-webkit-meter-optimum-value {background:green;} / * Good */::-webkit-meter-suboptimum-value {background:orange;} / * passable */::-webkit-meter-even-less-good-value {background:blue;} / * bad *   /

In fact, Firefox, the pseudo-element ::-moz-meter-bar is also a reaction, but looks like the effect is a bit tricky, the following CSS:

::-moz-meter-bar {    Background:rgba (0,96,0,.6);}

The result is not the background bar change, but the progress bar has changed, all changed, as follows:

<progress> elements
Another HTML5 control element that each browser has a pseudo-element control.

Nephew Point Lantern-as usual, first look at IE browser, pseudo-elements ::-ms-fill , you can change the completed progress bar part of the style, such as the background color:

::-ms-fill {background: #34538b;}

The Chrome browser is relatively complex and has a relatively fine control, with the Shadow Dom as follows:

• ::-webkit-progress-inner-element– progress inner Element
• ::-webkit-progress-bar– Background progress bar
• ::-webkit-progress-value– Complete the progress bar

Thus, the following CSS controls:

progress {-webkit-appearance:none;}::-webkit-progress-inner-element {}::-webkit-progress-bar {border:1px solid Blac K }::-webkit-progress-value {background: #34538b;}

The effect is as follows (Win7 Chrome 25):

For the Firefox browser, ::-moz-progress-bar pseudo-element control, the following CSS:

::-moz-progress-bar {background: #34538b;}

The effect is as follows (Win7 FF21):

<select> elements
IE10 Browser, this ::-ms-expand can change the drop-down box element drop-down button style.

::-ms-expand {    padding:. 5em;    Color: #34538b;    border:1px solid #a0b3d6;    Background: #f0f3f9;}

<textarea> elements
The WebKit has a pseudo-element ::-webkit-resizer that can change the style of the lower-right corner of the stretched small marker.

For example, we can hide it (different from resize: none , still stretch) or set the background image to replace it:

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

::-webkit-resizer {    background:url (/study/image/selection.gif);    outline:1px dotted #000;}

Effect:

Iv. Miscellaneous

Form validation Information
Only WebKit kernel browser current bird, change the validation prompt when the Bubble box UI, pseudo-elements are as follows:

• ::-webkit-validation-bubble– Entire pop-up box area
• ::-webkit-validation-bubble-arrow– The sharp corner of the popup box
• ::-webkit-validation-bubble-arrow-clipper - 弹出框尖角所在块状区域
• ::-webkit-validation-bubble-heading– Text titles occupy areas
• ::-webkit-validation-bubble-message– The entire square information box of the text hint
• ::-webkit-validation-bubble-text-block– The block area where the text is located

When the actual reset style, as long as the use of the part can be, personal humble opinion, ::-webkit-validation-bubble-text-block and ::-webkit-validation-bubble-heading has the function of repetition, so, generally as long as set one on it! ::-webkit-validation-bubble-headinggo a little deeper.

Let's say we're going to get a UI effect that looks good like this:

We may need some of the following settings:

/* Generally, this is the reset body, changing the border, background color, and fillet size */::-webkit-validation-bubble-text-block {font-size:12px;}

This address: http://www.zhangxinxu.com/wordpress/?p=3381

Pseudo-element form control default style reset and custom Daquan