伪元素控制表单样式
2016-03-31 14:33
609 查看
当开发web应用程序时,表单样式是个头疼的问题。以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式。然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示。
然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎。以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表。¬在我写这篇文章的同时,发布了一些webkit的伪元素,所以现在伪元素基本统一了。我不知道Presto引擎提供的任何形式的伪元素。
一些注意点:
这里列出的所有伪元素IE10支持,但是他们在IE的早期版本不支持
对于webkit,设置一些伪元素样式,你必须把元素的-webkit-appearance为none。例如,设置::-webkit-progress-bar样式,你必须给<progress>元素应用-webkit-appearance: none;
<input> 元素
button
checkbox / radio
color
date
file
number
password
placeholder 属性
range
reset
search
submit
text
其他元素
button
keygen
meter
progress
select
textarea
其他
表单验证消息
查看<button>
IE浏览器引擎提供::-ms-check伪元素,来控制单选复选框的样式。例如:
<input type="checkbox">
<input type="radio">
::-ms-check {
color: red;
background: black;
padding: 1em;
}
Webkit为颜色选择提供了两个伪元素, ::-webkit-color-swatch-wrapper 和 ::-webkit-color-swatch。你可以给这些元素应用多样的规则,但是我还没有想出什么好点子来使用它们。这里只是简单的演示一下。
<input type="color">
::-webkit-color-swatch-wrapper {
border: 2px solid red;
}
::-webkit-color-swatch {
opacity: 0.5;
}
下面8个伪元素是webkit专为定制输入日期:
下面有这些元素的内部结构:
如果你想要你输入的日期使用更多的空间和多彩的颜色,你添加如下样式:
<input type="date">
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
当我们写上<input type="file">,所有的渲染引擎会自动创建一个按钮。以前,这个按钮是完全不能设置样式的。然而,最近IE和webkit通过伪元素可以给他们添加样式了。
IE10可以使用::-ms-browse伪元素给<input type="file">按钮添加样式,任何添加给普通按钮的样式,都可以应用给伪元素。例如:
<input type="file">
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
在win8的IE10显示如下:
Webkit使用::-webkit-file-upload-button伪元素为<input type="file">按钮添加样式,同样任何添加给普通按钮的样式,都可以应用给伪元素。例如:
<input type="file">
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
在苹果系统上的chrome26显示如下:
Webkit通过默认的数字选择器提供下拉列表一个控制。伪元素::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button提供定制化样式。虽然不能对这样的元素做过多的控制,但是至少可以隐藏掉下来
<input type="number">
::-webkit-textfield-decoration-container { }
::-webkit-inner-spin-button {
-webkit-appearance: none;
}
::-webkit-outer-spin-button {
-webkit-appearance: none;
}
Trident引擎为密码输入框提供的一种控制,就是可以让他显示显示纯文本。而这个控制是通过::-ms-reveal操作的。你可以在这个控制下修改包括字体颜色,背景色或是显示隐藏的效果。下面是隐藏的效果
<input type="password">
::-ms-reveal { display: none; }
::-webkit-input-placeholder {
color: blue;
font-family: 'Comic Sans MS';
}
这是在苹果系统的firefox20的显示效果
::-moz-range-track {
border: 2px solid red;
height: 20px;
background: orange;
}
::-moz-range-thumb {
background: blue;
height: 30px;
}
OSX下Firefox22的显示效果:
下面是一个水平范围元素的简单例子。如下:<input type="range">
::-ms-fill-lower { background: orange; }
::-ms-fill-upper { background: green; }
::-ms-thumb { background: red; }
::-ms-ticks-after { display: block; color: blue; }
::-ms-ticks-before { display: block; color: black; }
::-ms-track { padding: 20px 0; }
::-ms-tooltip { display: none; /* display and visibility only */ }
Win8下IE10的效果
::-webkit-slider-runnable-track {
border: 2px solid red;
background: green;
padding: 2em 0;
}
::-webkit-slider-thumb {
outline: 2px solid blue;
}
OSX下Chrome26的效果
对于范围元素有一点要注意,IE引擎和Webkit容许在划过状态时应用样式(它们分别是::-webkit-slider-thumb:hover和::-ms-thumb:hover)而火狐引擎暂不支持
/* Remove the rounded corners */
input[type=search] { -webkit-appearance: none; }
/* Hide the cancel button */
::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Hide the magnifying glass */
::-webkit-search-results-button { -webkit-appearance: none; }
OSX下Chrome26的效果
<input type="password" value="value">
<select>
<option selected>option</option>
</select>
::-ms-value {
color: red;
background: black;
padding: 1em;
}
清除操控在IE10里文本输入框获得焦点且非空的时候,文本框右侧会出现一个小x。当点击他,文本框的内容就会清空。小x的样式是由::-ms-clear pseudo-element控制的,所以你可以隐藏它。 <input type="text" >
::-ms-clear { display: none; }
有一个简化的规则::-ms-clear,所以你会看到这样:<input type="text" value="Lorem Ipsum" >
::-ms-clear {
color: red;
background: black;
padding: 1em;
}
它显示效果如下:
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;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
::-webkit-keygen-select {
background: black;
color: red;
}
<meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
meter { -webkit-appearance: none; }
::-webkit-meter-bar {
height: 50px;
background: white;
border: 2px solid black;
}
::-webkit-meter-optimum-value { background: green; }
::-webkit-meter-suboptimum-value { background: orange; }
::-webkit-meter-even-less-good-value { background: blue; }
类似于meter,为了给这些元素应用样式,你必须给进度条元素设置-webkit-appearance: none;这有例子: <progress max="100" value="50"></progress>
progress { -webkit-appearance: none; }
::-webkit-progress-inner-element { }
::-webkit-progress-bar { border: 2px solid black; }
::-webkit-progress-value { background: red; }
::-moz-progress-bar { background: red; }
OSX中Firefox19显示效果:
::-ms-fill { background: red; }
Win8中IE10显示效果:
<option selected>One</option>
</select>
::-ms-expand {
padding: 2em;
color: red;
background: black;
}
Win8中IE10显示效果:
::-webkit-resizer {
display: none;
}
注意:给::-webkit-resizer添加display:none并不能阻止用户修改textarea的尺寸,他仅仅是隐藏了控制。如果你禁用尺寸调整,可以设置css属性resize:none。这个不仅可以隐藏控制,也可以在所有浏览器都禁用文本域尺寸调整。使用::-webkit-resizer也可以添加一些基本的样式。如果你想要使用更多的颜色可以这样添加: <textarea></textarea>
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
很容易看出每个元素都可以设置视觉效果,这里有例子:::-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;
}OSX中Chrome26显示效果:
这是一个比较实际的例子,展示提示框效果: ::-webkit-validation-bubble-message {
color: #eee;
background: black;
}
::-webkit-validation-bubble-arrow {
background: black;
border-color: #444;
box-shadow: none;
}
Mozilla CSS Extensions
Trident Vendor-Prefixed Pseudo Elements
WebKit’s current user agent stylesheet
Slightly dated guide from WebKit on styling form controls
Webkit Pseudo-Element Selectors (Shadow DOM Elements)
Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Forms
A FORM OF MADNESS
HTML5 inputs and attribute support
——大漠译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎。以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表。¬在我写这篇文章的同时,发布了一些webkit的伪元素,所以现在伪元素基本统一了。我不知道Presto引擎提供的任何形式的伪元素。
一些注意点:
这里列出的所有伪元素IE10支持,但是他们在IE的早期版本不支持
对于webkit,设置一些伪元素样式,你必须把元素的-webkit-appearance为none。例如,设置::-webkit-progress-bar样式,你必须给<progress>元素应用-webkit-appearance: none;
目录
<input> 元素button
checkbox / radio
color
date
file
number
password
placeholder 属性
range
reset
search
submit
text
其他元素
button
keygen
meter
progress
select
textarea
其他
表单验证消息
input[type=button]
Gecko
查看<button>
input[type=checkbox] / input[type=radio]
Trident
IE浏览器引擎提供::-ms-check伪元素,来控制单选复选框的样式。例如:<input type="checkbox">
<input type="radio">
::-ms-check {
color: red;
background: black;
padding: 1em;
}
这是在win8的IE10中的效果:
input[type=color]
WebKit
Webkit为颜色选择提供了两个伪元素, ::-webkit-color-swatch-wrapper 和 ::-webkit-color-swatch。你可以给这些元素应用多样的规则,但是我还没有想出什么好点子来使用它们。这里只是简单的演示一下。<input type="color">
::-webkit-color-swatch-wrapper {
border: 2px solid red;
}
::-webkit-color-swatch {
opacity: 0.5;
}
这是在苹果系统下chrome26的显示效果:
input[type=date]
WebKit
下面8个伪元素是webkit专为定制输入日期:::-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
下面有这些元素的内部结构:
如果你想要你输入的日期使用更多的空间和多彩的颜色,你添加如下样式:
<input type="date">
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
在苹果系统上的chrome26显示如下:
input[type=file]
当我们写上<input type="file">,所有的渲染引擎会自动创建一个按钮。以前,这个按钮是完全不能设置样式的。然而,最近IE和webkit通过伪元素可以给他们添加样式了。
Trident
IE10可以使用::-ms-browse伪元素给<input type="file">按钮添加样式,任何添加给普通按钮的样式,都可以应用给伪元素。例如:<input type="file">
::-ms-browse {
background: black;
color: red;
padding: 1em;
}
在win8的IE10显示如下:
WebKit
Webkit使用::-webkit-file-upload-button伪元素为<input type="file">按钮添加样式,同样任何添加给普通按钮的样式,都可以应用给伪元素。例如:<input type="file">
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}
在苹果系统上的chrome26显示如下:
input[type=number]
WebKit
Webkit通过默认的数字选择器提供下拉列表一个控制。伪元素::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button提供定制化样式。虽然不能对这样的元素做过多的控制,但是至少可以隐藏掉下来<input type="number">
::-webkit-textfield-decoration-container { }
::-webkit-inner-spin-button {
-webkit-appearance: none;
}
::-webkit-outer-spin-button {
-webkit-appearance: none;
}
这是在苹果系统下的chrome26的显示效果
input[type=password]
Trident
Trident引擎为密码输入框提供的一种控制,就是可以让他显示显示纯文本。而这个控制是通过::-ms-reveal操作的。你可以在这个控制下修改包括字体颜色,背景色或是显示隐藏的效果。下面是隐藏的效果<input type="password">
::-ms-reveal { display: none; }
这是在win8系统下的IE10的显示效果:placeholder属性
Gecko
火狐引擎用伪元素::-moz-placeholder控制占位符的文本样式。你可以用他来改变占位符内字体颜色和字体属性。例如:<input placeholder="placeholder"> ::-moz-placeholder { color: blue; font-family: 'Comic Sans MS'; } 这是在苹果系统的firefox20的显示效果 注意:火狐引擎从:-moz-placeholder在firefox的19版时改为::-moz-placeholderTrident
Trident引擎为占位符文本提供的一个伪类而不是伪元素来设置样式。但是伪类:-ms-input-placeholder,其他渲染引擎可以用其他的伪元素代替 <input placeholder="placeholder"> :-ms-input-placeholder { color: blue; font-family: 'Comic Sans MS'; } Win8系统的IE10显示效果:
WebKit
Webkit引擎使用::-webkit-input-placeholder,他也可以修改占位符的字体颜色和字体属性<input placeholder="placeholder">::-webkit-input-placeholder {
color: blue;
font-family: 'Comic Sans MS';
}
这是在苹果系统的firefox20的显示效果
input[type=range]
Gecko
火狐在Firefox22版提供::-moz-range-track and ::-moz-range-thumb来设置范围元素的样式。可以给他应用尽可能多的样式。例如:<input type="range">::-moz-range-track {
border: 2px solid red;
height: 20px;
background: orange;
}
::-moz-range-thumb {
background: blue;
height: 30px;
}
OSX下Firefox22的显示效果:
Trident
IE引擎为定制范围元素样式提供一系列很棒的伪元素:::-ms-fill-lower: 轨道手柄前面
::-ms-fill-upper: 轨道手柄后面
::-ms-ticks-before: 跟踪刻度线范围前
::-ms-ticks-after: 跟踪刻度线范围后
::-ms-thumb: 手柄
::-ms-track: 轨道
::ms-tooltip: 在用户选择一个范围元素时显示工具。注意,这个元素不能设置样式,只能用display隐藏。
下面是一个水平范围元素的简单例子。如下:<input type="range">
::-ms-fill-lower { background: orange; }
::-ms-fill-upper { background: green; }
::-ms-thumb { background: red; }
::-ms-ticks-after { display: block; color: blue; }
::-ms-ticks-before { display: block; color: black; }
::-ms-track { padding: 20px 0; }
::-ms-tooltip { display: none; /* display and visibility only */ }
Win8下IE10的效果
WebKit
Webkit为范围元素提供::-webkit-slider-runnable-track和::-webkit-slider-thumb,然而不能给他们添加过多的样式,你可以添加一些颜色和留白<input type="range">::-webkit-slider-runnable-track {
border: 2px solid red;
background: green;
padding: 2em 0;
}
::-webkit-slider-thumb {
outline: 2px solid blue;
}
OSX下Chrome26的效果
对于范围元素有一点要注意,IE引擎和Webkit容许在划过状态时应用样式(它们分别是::-webkit-slider-thumb:hover和::-ms-thumb:hover)而火狐引擎暂不支持
input[type=reset]
查看 <button>input[type=search]
WebKit
webkit默认为搜索框提供一个定制的ui带有取消和搜索按钮。::-webkit-search-cancel-button 和 ::-webkit-search-results-button可以提供定制样式,但是你除了像下面那样隐藏,不能做再多的操作<input type="search">/* Remove the rounded corners */
input[type=search] { -webkit-appearance: none; }
/* Hide the cancel button */
::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Hide the magnifying glass */
::-webkit-search-results-button { -webkit-appearance: none; }
OSX下Chrome26的效果
input[type=submit]
Gecko
查看 <button>input[type=text]
Trident
IE10使用::-ms-value为文本输入框提供样式(文本输入框,密码输入框等等)和下拉列表。例如: <input type="text" value="value"><input type="password" value="value">
<select>
<option selected>option</option>
</select>
::-ms-value {
color: red;
background: black;
padding: 1em;
}
Win8下IE10的效果
清除操控在IE10里文本输入框获得焦点且非空的时候,文本框右侧会出现一个小x。当点击他,文本框的内容就会清空。小x的样式是由::-ms-clear pseudo-element控制的,所以你可以隐藏它。 <input type="text" >
::-ms-clear { display: none; }
Win8下IE10的效果
有一个简化的规则::-ms-clear,所以你会看到这样:<input type="text" value="Lorem Ipsum" >
::-ms-clear {
color: red;
background: black;
padding: 1em;
}
它显示效果如下:
<button> Element
Gecko
火狐应用伪元素::-moz-focus-outer 和 ::-moz-focus-inner给input类型是button,reset, 和 submit,还有button元素设置样式。也许你用这些伪元素不能做很多事情,但是有一点重要的事情是,火狐可以应用他们添加border和paddingbutton::-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;
}
这些规则可以在火狐和其他渲染引擎上很容易的创建按钮显示的不同外观。这是令人困惑的事情,实际上需要一个方法去掉他们。自从2002开始有这个方法。默认的padding和border可以被重置为0 button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
在苹果系统的firefox19显示效果如下:
<keygen> 元素
WebKit
Webkit提供::-webkit-keygen-select,可用于注册元素自定义下拉样式,例如: <keygen>::-webkit-keygen-select {
background: black;
color: red;
}
OSX中Chrome26显示效果:
<meter> 元素
WebKit
Webkit提供::-webkit-meter-bar, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, and ::-webkit-meter-suboptimal-value用于meter元素的显示样式。为了应用这些伪元素设置样式,你必须在meter元素上设置-webkit-appearance为none::-webkit-meter-even-less-good-value,::-webkit-meter-optimum-value, 和 ::-webkit-meter-suboptimal-value其中只有一个,会在给定时间依据meter的value值处于激活状态。见如下例子: <meter low="69" high="80" max="100" optimum="100" value="92">A</meter><meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
meter { -webkit-appearance: none; }
::-webkit-meter-bar {
height: 50px;
background: white;
border: 2px solid black;
}
::-webkit-meter-optimum-value { background: green; }
::-webkit-meter-suboptimum-value { background: orange; }
::-webkit-meter-even-less-good-value { background: blue; }
OSX中Chrome26显示效果:
<progress> 元素
WebKit
Webkit提供::-webkit-progress-inner-element, ::-webkit-progress-bar, & ::-webkit-progress-value用于进度条样式,他们的层级关系如下:类似于meter,为了给这些元素应用样式,你必须给进度条元素设置-webkit-appearance: none;这有例子: <progress max="100" value="50"></progress>
progress { -webkit-appearance: none; }
::-webkit-progress-inner-element { }
::-webkit-progress-bar { border: 2px solid black; }
::-webkit-progress-value { background: red; }
OSX中Chrome26显示效果:
Gecko
Gecko为进度条提供::-moz-progress-bar来设置样式。例如:<progress max="100" value="50"></progress>::-moz-progress-bar { background: red; }
OSX中Firefox19显示效果:
Trident
像火狐一样,IE给进度条提供单一的伪元素::-ms-fill,例如:<progress max="100" value="50"></progress>::-ms-fill { background: red; }
Win8中IE10显示效果:
<select> 元素
Trident
IE10提供::-ms-expand用来修改下拉列表的箭头样式。例如:<select><option selected>One</option>
</select>
::-ms-expand {
padding: 2em;
color: red;
background: black;
}
Win8中IE10显示效果:
<textarea> 元素
WebKit
Webkit提供的::-webkit-resizer用于可以自动控制尺寸的元素,把它添加到文本域的右下角。他可以用个display:none或是-webkit-appearance: none:隐藏掉。 <textarea></textarea>::-webkit-resizer {
display: none;
}
OSX中Chrome26显示效果:
注意:给::-webkit-resizer添加display:none并不能阻止用户修改textarea的尺寸,他仅仅是隐藏了控制。如果你禁用尺寸调整,可以设置css属性resize:none。这个不仅可以隐藏控制,也可以在所有浏览器都禁用文本域尺寸调整。使用::-webkit-resizer也可以添加一些基本的样式。如果你想要使用更多的颜色可以这样添加: <textarea></textarea>
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
OSX中Chrome26显示效果:
表单验证信息
WebKit
Webkit是唯一支持约束验证api创建验证冒泡的渲染引擎。提供的伪元素如下:::-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
很容易看出每个元素都可以设置视觉效果,这里有例子:::-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;
}OSX中Chrome26显示效果:
这是一个比较实际的例子,展示提示框效果: ::-webkit-validation-bubble-message {
color: #eee;
background: black;
}
::-webkit-validation-bubble-arrow {
background: black;
border-color: #444;
box-shadow: none;
}
OSX中Chrome26显示效果:
这就是它!
希望你看到这些列表对您有所帮助。如果我没有统计到的元素或部分信息变得过时了,希望您能在评论中告诉我。扩展阅读
The Current State of HTML5 FormsMozilla CSS Extensions
Trident Vendor-Prefixed Pseudo Elements
WebKit’s current user agent stylesheet
Slightly dated guide from WebKit on styling form controls
Webkit Pseudo-Element Selectors (Shadow DOM Elements)
Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Forms
A FORM OF MADNESS
HTML5 inputs and attribute support
特别推荐——Webkit css Library
Webkit CSS Library是CtripUED团队整理的一个有关于Webkit私有属性的手册,方便大家查询和使用。——大漠译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
关于D姐
网名different,前端攻城师一名,现居北京,对css3、javascript、前端UI等前端开发有浓厚兴趣,请关注我:新浪微博如需转载烦请注明出处:英文原文:http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls中文译文:http://www.w3cplus.com/css3/list-of-pseudo-elements-to-style-form-controls.html原文地址:http://blog.aizhet.com/web/10834.html 真的太棒!!!非常感谢~
相关文章推荐
- CSS中的textarea的一些设置之resize属性(个人笔记)
- CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系
- 使用CSS绘制三角形
- H5移动前端开发常用高能css3汇总
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- css3制作tab卡片选中小尖角
- 二级菜单总结
- Html+CSS input type=file 文件类型限制属性 accept (HTML 5)
- 根据浏览器显示界面大小变换,替换css文件方法
- CSS实现的loading页面等待效果
- LESS CSS 框架简介
- clearfix:after 清除css浮动
- 史上最全的CSS hack方式一览
- 笔记 - 10.4、HTML - CSS滤镜笔记
- CSS声明各个浏览器私有属性的命名前缀
- 笔记 - 10.3、HTML - CSS样式笔记1
- 笔记 - 10.2、HTML - CSS选择器笔记
- 笔记 - 10.1、HTML - CSS概念笔记
- css 兼容大全
- 用HTML+CSS实现简单的下拉列表