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;
}

通常我会将占位符定位为样式（例如，给它一个验证错误类），如下所示：

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

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

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

关于我如何正确地为上面使用的方法应用CSS类的任何建议？

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>

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

我还会考虑在标签/输入组合的包装器中添加一个类，以便更好地控制并避免出现这种特殊性问题。我使用sass作为预处理器，使用BEM命名约定做了一个快速示例。这并不意味着复制代码的行为，但应该作为一个很好的起点。

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

然后，您可以将错误类添加为＆＃39;修饰符＆＃39;每个元素允许您独立设置这些样式，例如.fancy__input--error并且不依赖于使用+选择器之类的东西。

表单：输入+标签作为占位符

1 个答案: