是否可以選擇最近的css選擇器或父級

Question

對於通用的標題很抱歉，無論如何，我有一些簡單的HTML，如下所示：

<div class="block flex-1 mx-4 relative w-1/2">
    <div class="form-group label-floating">
        <label class="control-label">Password</label>
        <input class="form-control" placeholder="" type="password">
        <span class="material-input"></span>
    </div>
</div>

現在，當一個人點擊輸入時，我縮小了標簽大小，如下所示：

使用以下css：

&.label-floating {

    &:focus-within {
        & > .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
    }
}

現在，我的問題是，如果輸入不為空且用戶離開輸入，標簽將返回正常大小。 所以我嘗試過這樣的事情：

使用以下css：

&.label-floating {

    &:focus-within {
        & > .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
    }

    & input:not(:empty){
        & .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
        & < .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
    }
}

沒有用，所以，我的問題是，有沒有辦法用純粹的CSS實現我想要的東西？

編輯：請有人請編輯OP以嵌入圖片。

更新了純css：

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-group > .control-label {
  color: #888da8;
}

.form-group.label-floating:focus-within > .control-label {
  top: 10px;
  font-size: 11px;
  line-height: 1.07143;
}

.form-group.label-floating input:not(:empty) .control-label {
  top: 10px;
  font-size: 11px;
  line-height: 1.07143;
}

Answer 1

您無法在不檢查內容是否有效的情況下定位包含值的輸入。 但是，您可以使用循環方式檢查輸入是否沒有值。

您的輸入具有placeholder屬性。 CSS選擇器:placeholder-shown將定位顯示占位符的輸入; 也就是說，指定了占位符屬性且不為空的輸入。

因此，您必須設置空輸入標簽的樣式。

 .form-control:placeholder-shown ~ .control-label { font-size: 20px; color: red; } .label-floating:focus-within > .control-label, .form-control ~ .control-label { font-size: 11px; color: blue; } 

 <div class="form-group label-floating"> <input class="form-control" placeholder="" type="password"> <label class="control-label">Password</label> </div> 

請注意:placeholder-shown盡管受到高度要求 ，但IE / Edge中未實現:placeholder-shown ; 但是，有可用的填充物 。