伪元素控制表单样式

Posted viana37

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了伪元素控制表单样式相关的知识，希望对你有一定的参考价值。

当开发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
  • 其他
    • 表单验证消息

input[type=button]

Gecko

查看<button>

input[type=checkbox] / input[type=radio]

Trident

IE浏览器引擎提供::-ms-check伪元素，来控制单选复选框的样式。例如： 

  1. <input type="checkbox"> 
  2. <input type="radio"> 
  3. ::-ms-check   
  4.   color: red;  
  5.   background: black;  
  6.   padding: 1em;  
  7.  
 
这是在win8的IE10中的效果：

input[type=color]

WebKit

Webkit为颜色选择提供了两个伪元素， ::-webkit-color-swatch-wrapper 和 ::-webkit-color-swatch。你可以给这些元素应用多样的规则，但是我还没有想出什么好点子来使用它们。这里只是简单的演示一下。 

  1. <input type="color">     
  2. ::-webkit-color-swatch-wrapper    
  3.   border: 2px solid red;   
  4.  
  5. ::-webkit-color-swatch    
  6.   opacity: 0.5;   
  7.  
 
这是在苹果系统下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

下面有这些元素的内部结构：

如果你想要你输入的日期使用更多的空间和多彩的颜色，你添加如下样式： 

  1. <input type="date">     
  2. ::-webkit-datetime-edit  padding: 1em;   
  3. ::-webkit-datetime-edit-fields-wrapper  background: silver;   
  4. ::-webkit-datetime-edit-text  color: red; padding: 0 0.3em;   
  5. ::-webkit-datetime-edit-month-field  color: blue;   
  6. ::-webkit-datetime-edit-day-field  color: green;   
  7. ::-webkit-datetime-edit-year-field  color: purple;   
  8. ::-webkit-inner-spin-button  display: none;   
  9. ::-webkit-calendar-picker-indicator  background: orange;   
在苹果系统上的chrome26显示如下：

input[type=file]

当我们写上<input type="file">，所有的渲染引擎会自动创建一个按钮。以前，这个按钮是完全不能设置样式的。然而，最近IE和webkit通过伪元素可以给他们添加样式了。

Trident

IE10可以使用::-ms-browse伪元素给<input type="file">按钮添加样式，任何添加给普通按钮的样式，都可以应用给伪元素。例如：

  1. <input type="file">     
  2. ::-ms-browse   
  3.   background: black;  
  4.   color: red;  
  5.   padding: 1em;  
  6.   

在win8的IE10显示如下：

WebKit

Webkit使用::-webkit-file-upload-button伪元素为<input type="file">按钮添加样式，同样任何添加给普通按钮的样式，都可以应用给伪元素。例如：

  1. <input type="file">     
  2. ::-webkit-file-upload-button   
  3.   background: black;  
  4.   color: red;  
  5.   padding: 1em;  
  6.    

在苹果系统上的chrome26显示如下：

input[type=number]

WebKit

Webkit通过默认的数字选择器提供下拉列表一个控制。伪元素::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button提供定制化样式。虽然不能对这样的元素做过多的控制，但是至少可以隐藏掉下来 

  1. <input type="number">     
  2. ::-webkit-textfield-decoration-container    
  3. ::-webkit-inner-spin-button   
  4.   -webkit-appearance: none;  
  5.  
  6. ::-webkit-outer-spin-button   
  7.   -webkit-appearance: none;  
  8.  
 
这是在苹果系统下的chrome26的显示效果

input[type=password]

Trident

Trident引擎为密码输入框提供的一种控制，就是可以让他显示显示纯文本。而这个控制是通过::-ms-reveal操作的。你可以在这个控制下修改包括字体颜色，背景色或是显示隐藏的效果。下面是隐藏的效果 

  1. <input type="password">     
  2. ::-ms-reveal  display: none;   
这是在win8系统下的IE10的显示效果:
placeholder属性
Gecko
火狐引擎用伪元素::-moz-placeholder控制占位符的文本样式。你可以用他来改变占位符内字体颜色和字体属性。例如：

 

  
  1. <input placeholder="placeholder">     
  2. ::-moz-placeholder   
  3.   color: blue;  
  4.   font-family: 'Comic Sans MS';  
  5.    

 
这是在苹果系统的firefox20的显示效果
注意：火狐引擎从:-moz-placeholder在firefox的19版时改为::-moz-placeholder
Trident
Trident引擎为占位符文本提供的一个伪类而不是伪元素来设置样式。但是伪类:-ms-input-placeholder，其他渲染引擎可以用其他的伪元素代替 

  

   
  1. <input placeholder="placeholder">     
  2. :-ms-input-placeholder   
  3.   color: blue;  
  4.   font-family: 'Comic Sans MS';  
  5.   

  
Win8系统的IE10显示效果:
WebKit
Webkit引擎使用::-webkit-input-placeholder，他也可以修改占位符的字体颜色和字体属性

  

   
  1. <input placeholder="placeholder">     
  2. ::-webkit-input-placeholder   
  3.   color: blue;  
  4.   font-family: 'Comic Sans MS';  
  5.    

  
这是在苹果系统的firefox20的显示效果
input[type=range]
Gecko
火狐在Firefox22版提供::-moz-range-track and ::-moz-range-thumb来设置范围元素的样式。可以给他应用尽可能多的样式。例如：

  

   
  1. <input type="range">     
  2. ::-moz-range-track   
  3.   border: 2px solid red;  
  4.   height: 20px;  
  5.   background: orange;  
  6.   
  7. ::-moz-range-thumb   
  8.   background: blue;  
  9.   height: 30px;  
  10.    

  
OSX下Firefox22的显示效果：
Trident
IE引擎为定制范围元素样式提供一系列很棒的伪元素：