仅样式化文本输入

假设您希望为文本输入添加漂亮的样式

所以您开始为这些输入添加样式

input {
    border: 5px solid white; 
    -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    padding: 15px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
}

但是，当您添加更多输入、文件输入和提交按钮时，您会感到沮丧，因为您不希望这些样式影响这些元素。

所以您会想，没问题，我只要确保只为文本输入添加样式！

input[type=text] {
   /* Awesome styling */
}

但是，当您构建表单时，您会意识到想要使用新的 HTML5 输入类型。这些新的输入类型意味着更好的可访问性、更好的移动设备支持以及增强的桌面浏览器体验。有type=email、type=url、type=tel、type=number、type=color等等！这将变得很麻烦……

input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email], {
   /* And that ain't all of them... */
}

我们该怎么办？好吧，我最喜欢的方法是利用 CSS3 和:not() 选择器。因此，我们不包含所有新的类型，而是排除我们不希望设置样式的类型。

input:not([type=submit]):not([type=file]) {
   /* omg so much cleaner */
}

现在，您回到了起点（默认用户代理样式表）来处理其他输入。不要害怕使用浏览器默认的表单控件，用户都了解并习惯了它们。

但是等等。IE 直到版本 9 才支持:not() 选择器，而该版本甚至还没有真正发布。是的，确实如此，这很糟糕。但是，如果您想修复这个问题，可以通过快速复制粘贴来实现。

<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

这是来自此项目，该项目

将 MSIE5.5-8 升级为与现代浏览器兼容。

对此不感兴趣？好吧，您始终可以列出所有属性选择器（如上所示），这将使您恢复到 IE7 支持。或者，您可以回到在每个输入上都添加类名并通过该类名进行选择，这应该会让您回到互联网的早期。