CSS 格式化 SSN 表单输入答案

【问题标题】：CSS to format SSN form inputCSS 格式化 SSN 表单输入
【发布时间】：2015-06-25 16:16:02
【问题描述】：

我有一个用 HTML5 和 CSS3 编写的表单，其中包含一些非常具体的字段（SSN、电话号码、首字母），它们的长度各不相同。我试图弄清楚如何格式化输入字段，因此它只有 X 个字符长，具体取决于输入（SSN 为 11，Initial 为 1，ZIP 为 5...等）

我知道您过去可以设置 size="11" 并且输入字段（不是标签）将设置为该大小，但是这似乎已被禁用或被 BS3 覆盖。

对如何完成这项工作有任何建议吗？

我目前的代码是：

                    <div class="form-group">
                    <label class="control-label" for="SSN">SSN:</label>
                    <input type="email" class="form-control" id="SSN" placeholder="###-##-####" size="12">
                </div>

但这似乎不起作用，如果我尝试 class="col-sm-2" （或任何其他数字），格式就会变得很愚蠢（在某些情况下无法正确排列）。

提前致谢。

【问题讨论】：

标签： html css input field

【解决方案1】：

由于您标记了html5，您可以使用：

<div class="form-group">
     <label class="control-label" for="SSN">SSN:</label>
     <input type="email" class="form-control" id="SSN" placeholder="###-##-####" maxlength="12">
</div>

顺便说一下，class="col-sm-2" 是一个引导类，它定义了一个元素应该跨越的列数。访问http://getbootstrap.com了解更多信息。

确保您的 html 文档类型是：<!doctype html>，或多或少意味着“使用 html5”。

【讨论】：

感谢您的建议刚刚尝试过，仍然将输入字段推到列的剩余长度。我开始认为引导程序会覆盖输入字段的大小，但是我找不到任何说明它的内容。
在玩弄之后，似乎可以输入的最大字符数为 12（绝对是所需的结果），但实际输入框仍然是列的长度。我正在考虑使该框更小以反映输入最大长度的实际大小。
没问题。在引导程序中，form-control 类使输入字段为 100% 宽度。花一些时间阅读 bootstrap 的文档可能是值得的。此外，如果您使用的是 Chrome，您可以右键单击输入并单击 inspect element 以打开 Chrome 开发者工具。在那里，您可以查看与元素关联的所有 CSS 样式（还可以实时编辑它们）。