html5 css3表单
在这个由三部分组成的有关HTML5表单的系列的第二篇文章中,我们将介绍样式或(更具体地说)可用于定位各种状态的输入字段的伪类选择器。 如果您还没有阅读过,请参考第一部分以确保您了解基本的标记概念。
删除默认样式
您可能已经注意到浏览器采用默认格式。 例如,大多数浏览器将圆角应用于search
框,并添加细微的背景渐变,这些渐变在您的平面设计上可能放错了位置。
要删除默认样式,可以使用如下appearance: none;
属性,需要前缀。 但是,请谨慎使用,因为它可以删除基本样式-复选框和单选按钮在Chrome中消失了! 为了安全起见,仅在需要时才应用属性,并在尽可能多的浏览器中进行测试,例如
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
}
注意我还重置了outline
和box-shadow
以在所有浏览器中删除默认的难看的蓝色框阴影焦点和错误样式。
外观属性记录在CSS-Tricks上,但处于不断变化的状态。
:焦点
:focus
自CSS2.1开始就受到支持,并为当前使用的字段设置样式,例如
input:focus,
textarea:focus,
select:focus {
background-color: #eef;
}
:已检查
:checked
样式将应用于选中的复选框或单选按钮,例如
<input type="checkbox" name="test" />
<label for="test">check me</label>
input:checked ~ label {
font-weight: bold;
}
没有相应的':unchecked'选择器,但您不需要一个选择器:只需创建默认样式,然后在激活:checked
时应用更改。 另外,您可以使用:not(:checked)
。
:不定
:indeterminate
在技术上尚无规范, 尽管已提及 。 根据规范,它表示“未选中或未选中”的复选框或单选按钮。
这是不寻常的,因为它仅在通过JavaScript设置复选框的.indeterminate
属性时才应用样式,即
document.getElementById("mycheckbox").indeterminate = true;
它对.checked
属性.checked
,只能为true或false。
:indeterminate
可能有用的情况很少。 如果您有一个列表复选框,则可以提供一个“全部选中”复选框,单击该复选框可以选中或取消选中每个项目。 但是,如果您检查了某些项目,则“全部检查”复选框可能会变成不确定状态。
:需要
:required
将样式应用于具有required
属性且必须在提交之前输入的任何输入。
:可选的
:optional
将样式应用于没有required
属性的任何输入。 我不确定为什么要添加它,因为:not(:required)
是否会这样做?
:有效
:valid
将样式应用于当前包含有效数据的任何输入。
:无效
类似地, :invalid
(或:not(:valid)
)将样式应用于当前包含无效数据的任何输入,例如
input:invalid {
border-color: #900;
}
:范围内(数字和范围输入)
可以使用:in-range
选择保持符合step
值的min
和max
属性之间的有效值的数字和范围。 显然,滑块超出范围有点困难,但是…
:超出范围(数量和范围输入)
:out-of-range
将范围输入的无效数字值作为目标。
:禁用
具有disabled
属性的输入可以使用:disabled
伪类作为目标,例如
input:disabled {
color: #ccc;
background-color: #eee;
}
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
请记住,禁用的字段将不会被验证或将其数据发布到服务器。 但是,伪类的样式,如:required
和:invalid
仍将应用。
:启用
同样,可以使用:enabled
(或:not(:disabled)
)选择非禁用字段。 实际上,由于它是默认输入样式,因此您不太可能需要此选择器。
:只读
具有readonly
属性的输入可以使用:read-only
伪类作为目标。 请记住,只读输入仍将被验证并发布到服务器,但用户无法更改值。
:读写
可以使用:read-write
(或:not(:read-only)
)选择标准的读写字段。 同样,它不是您经常需要的选择器。
:默认(仅提交按钮或输入)
最后,我们有:default
选择器,它将样式应用于默认的Submit按钮。
占位符文字样式
可以使用带有供应商前缀(在单独的规则中)的::placeholder
伪元素来设置placeholder
属性文本的样式,例如
input::-webkit-input-placeholder { color: #ccc; }
input::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder { color: #ccc; }
input::placeholder { color: #ccc; }
CSS特异性
上面的选择器具有相同的特殊性,因此在定义应用于相同输入的两种或多种样式时需要格外小心。 考虑:
input:invalid { color: red; }
input:enabled { color: black; }
在这里,我们要求所有无效字段都使用红色文本,但是永远不会发生,因为我们稍后在样式表中将所有启用的字段定义为具有黑色文本。
使选择器保持简单并使用最少的代码量。 例如,空的:required
字段将是:invalid
因此几乎不必设置前者的样式。
验证气泡
提交时,第一个无效值会以错误提示框突出显示:
气泡设计在设备和浏览器上会有所不同。 仅Webkit / Blink浏览器允许一定程度的非标准CSS自定义:
::-webkit-validation-bubble { ... }
::-webkit-validation-bubble-arrow { ... }
::-webkit-validation-bubble-message { ... }
::-webkit-validation-bubble-arrow-clipper { ... }
我的建议:不要费力尝试。 如果您需要自定义错误格式,则几乎可以肯定要使用自定义消息。 为此,您将需要JavaScript。
浏览器支持
通常,重要的样式和选择器可在IE10 +的所有现代浏览器中使用。 其中一些不太有用的工具(例如in-range
目前仅适用于Webkit / Blink。 较旧的浏览器将支持:focus
但是,对于任何更复杂的功能,您都需要提供JavaScript后备功能。
创建可用表格
上面的样式将立即应用。 例如:
input:invalid {
border-color: #900;
}
将红色边框应用于任何无效字段。 不幸的是,当页面第一次加载时,每个字段都可能是无效的,并且用户面临着一系列令人生畏的红色框。
就我个人而言,我更喜欢在提交时或在从无效字段更改焦点时出现错误。 浏览器没有提供本地执行此操作的方法。 您猜对了-您需要JavaScript。 幸运的是,HTML5约束验证API提供了以下工具:
- 暂停验证,直到使用表单为止
- 使用自定义错误消息
- polyfill不支持的输入类型
- 为旧版浏览器提供后备样式和验证,以及
- 创建更多可用的表格
我们将在本系列的最后一部分中仔细研究这些内容。
html5 css3表单