Можно ли выбрать ближайший селектор CSS или родитель - PullRequest
Новая
       13

Можно ли выбрать ближайший селектор CSS или родитель

3 голосов
/ 19 марта 2019

Извините за общее название, в любом случае, у меня есть простой 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>

Теперь, когда человек нажимает на ввод, я уменьшаю размер этикетки следующим образом:

Password field with shrunk label

Со следующим css: 

&.label-floating {

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

Теперь моя проблема в том, что если ввод не пустой и пользователь покидает ввод, метка вернется к нормальному размеру. Итак, я пробовал такие вещи:

Password field with text entered and full-size label

со следующим 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?

edit: кто-нибудь может отредактировать 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;
}

1 Ответ

1 голос
/ 19 марта 2019

Нельзя настроить таргетинг на вход, содержащий значение, не проверив, является ли содержимое допустимым. Однако вы можете использовать обходной способ проверки, имеет ли вход значение no .

Ваш ввод имеет атрибут 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, несмотря на то, что настоятельно запрашивается ; однако есть полифилл доступны.

...