输入文本[您应该知道的一切]

输入在用户体验设计中至关重要，其风格能否完美地从设计转移到页面至关重要。网页上的呈现需要 CSS，这已不是什么秘密，但关键在于如何使其尽可能完美。

输入框比 HTML 中的任何其他元素都拥有更多的变化、状态和特性，所以，让我们来了解一下关于帖子输入框类型文本的所有知识。让我们来深入研究一下输入框！

输入 [type="text"]

输入文本会在预期文本的位置显示一个空白方块。这是一个相当常见的元素，在大多数情况下，它会呈现一个由彩色边框包围的白色元素。
建议在其中添加一个占位符文本，并在其外部放置一个标签。

默认输入文本

焦点状态下的默认输入文本

默认占位符文本

默认自动填充状态

要为输入框添加所需的样式，有一些标准选项和一些特殊选项。如果输入框有标签，则会将其添加到label输入框旁边的元素中，并且其for属性的值与链接的输入框元素的属性值相同id。标签元素可以像标准 HTML 文本元素一样设置样式。

对于输入框，更改尺寸、 、 和选项是标准做法border。background-color设置border-radius占位font符文本、焦点、自动填充和验证状态的样式则不是标准做法。这些非标准选项将在下一篇文章中解释，之后还会提供一些使用不同选项的示例。

占位符文本

使用占位符属性设置占位符文本的样式时，::placeholder需要使用伪元素。所有文本样式均受支持（字体、颜色、背景、不透明度、字距、文本变换、行高……）。在 Firefox 浏览器中，所有占位符都应用了不透明度值，因此要重置该值，需要定义不透明度。

 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
     ...
 }
 ::-moz-placeholder { /* Firefox 19+ */
     opacity:1;
     ...
 }
 :-ms-input-placeholder { /* IE 10+ */
     ...
 }
 :-moz-placeholder { /* Firefox 18- */
     ...
 }

例子：

 ::placeholder{
    color: coral;
    font-size: 14px;
    font-family: sans-serif;
    letter-spacing: .2px;
    padding-left: 5px;
 }

结果：

焦点状态

焦点状态对于用户体验至关重要，它存在于每个输入元素中。它用于指示当前目标元素。此状态通过元素周围的蓝色边框表示，在 CSS 中，它通过伪类 来选择:focus。

焦点元素周围的蓝色边框会使用默认线条添加outline: auto 5px -webkit-focus-ring-color，默认颜色值在浏览器主题中定义。在某些情况下，这种呈现方式会让元素设计人员感到困扰，有些人会选择使用以下代码禁用它：

 :focus{
     outline:none;
 }

这是一种非常糟糕的做法，应该避免。与其为焦点状态设置中性样式，不如使用自己的样式，而且不需要包含轮廓。

例子：

 :focus{
     outline:none;
     border:1px solid coral;
     box-shadow:0 0 5px coral;
 }

结果：

在这种情况下（以及任何其他情况下！）添加过渡是一种很好的做法。

自动完成状态

Webkit 浏览器提供了一个设置，允许用户自动填写常见表单字段的详细信息。您在填写姓名、地址和电子邮件等表单时一定见过这种情况。自动完成字段默认为黄色背景，这可能会影响设计，而且很容易更改（在此模式下，您还可以更改文本颜色）。

 :-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px mintcream inset !important;
 }

 :-webkit-autofill {
    -webkit-text-fill-color: coral !important;
 }

结果：

验证状态

有两个相对较新的伪类:valid和:invalid。这些伪类可用于向用户突出显示成功和失败。通常，内容有效时显示绿色，内容无效时显示红色，因此现在您可以轻松地使用 CSS 定义它们。请注意，旧版本的浏览器不支持它们。

 :valid {
    box-shadow: -5px 0 lime;
    border-left: none;     
 }

 :invalid {
    box-shadow: -5px 0 orangered;
    border-left: none;     
 }

box-shadow使用选项而不是border-left因为当一个元素的边框具有不同的样式或颜色时，存在视觉问题

结果：

额外提示

iOS 上输入框的另一个问题是添加了默认样式导致的。它有一些多余的圆角和阴影。我发现解决这个问题的最佳方法是daretothink 博客上的一个：

-webkit-appearance: none;

border-radius: 0;

好的例子

结束语

输入框的设计永远值得你投入，而且你的用户一定会喜欢。我再次建议你在样式中使用过渡效果。

本文最初发表于Kolosek Blog。