形式：输入+标签作为占位符

Question

我正在研究表单的自适应占位符。受此 http://blog.circleci.com/adaptive-placeholders 的启发，我使用 <label> 并赋予它样式，使其看起来像一个普通的占位符。

像这样：

input[type="text"][required] + label[placeholder]:before {
                content: attr(placeholder);
                display: inline-block;
                margin: 0 10px;
                padding: 0;
                color: #999999;
                white-space: nowrap;
}

通常我将占位符作为样式的目标（例如，给它一个验证错误 class），如下所示：

.error::-webkit-input-placeholder {
                color: #000;
            }

我的第一个想法是设置 .error class，但它不起作用：

.error::-webkit-input[type="text"][required] + label[placeholder]:before {
                color: #000;
            }

关于我如何正确应用上述方法的 CSS class 有什么建议吗？

JSFiddle：https://jsfiddle.net/34ye51t5/

谢谢。

Answer 1

您似乎运行遇到了特异性问题。添加以下 CSS 可行，但我会考虑重构您的代码以帮助避免这些问题。

input[type="text"].error + label[data-placeholder]:before{
  color: white;
}

首先 placeholder 是 not a valid attrinbute for a label - 它仅用于输入。您可以将其更改为数据属性，但我真的不明白这一点，您不妨按如下方式使用标签（alt 也不是有效属性

<label for="last_name">Last name</label>

然后您需要调整此标签的位置等。

我还会考虑将 class 添加到 label/input 组合的包装器中，以便更好地控制并避免上述特异性问题。我已经使用 sass 作为预处理器使用 BEM 命名约定完成了一个快速示例。这并不是要复制您的代码的行为，而是应该作为一个好的起点。

http://codepen.io/jaycrisp/pen/pgQbWd

然后您可以将错误 [=32=] 作为 'modifier' 添加到每个元素，以允许您独立设置这些元素的样式，例如.fancy__input--error 而不是依赖于使用 + 选择器之类的东西。

形式：输入+标签作为占位符

Forms: input + label as a placeholder

css

forms

label

input

placeholder