当文本字段被禁用时，标签转换被撤消答案

【问题标题】：Label transition is undone when text field gets disabled当文本字段被禁用时，标签转换被撤消
【发布时间】：2017-04-17 16:36:34
【问题描述】：

我正在创建一个类似文本字段的材料，除了禁用输入字段时它可以工作。当该字段被聚焦时，如果文本框中有任何输入，则标签会上升到光标上方，它应该保持在光标上方。当我禁用文本框时，即使框中有文本 (See the fiddle)，标签也会回到原来的位置。

这是我正在做的：

.txt-group label {
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 10px;
    transition: all 0.2s ease-in-out;
    color: #999999;
}

.txt-group input:focus ~ label,
.txt-group input:valid ~ label,
.txt-group input:valid:disabled ~ label {
    top: -8px;
    font-size: 14px;
}

【问题讨论】：

请在问题本身的minimal reproducible example 中提供所有相关代码，而不是在第三方网站上。
此解决方案可能需要 JavaScript。据我所知，:valid 是在 CSS 中测试 input 是否具有内容的唯一方法，但如果元素具有 readonly 或 disabled 属性，则它不再通过。

标签： css disabled-input

【解决方案1】：

当你声明 disabled css 时，你不应该也需要 valid 选择器。

试试这个：

.txt-group input:focus ~ label,
.txt-group input:valid ~ label,
.txt-group input:disabled ~ label {
  top: -8px;
  font-size: 14px;
}

工作JSFiddle

【讨论】：

即使禁用的input 字段为空，此方法也会将标签上移至“已完成”状态。
@JonUleis 哦该死，你是对的。我的错！我只是发短信询问里面是否有文字。