Можете ли вы создать ярлык ввода активной формы с помощью только CSS

Ответ 1

Нет. К сожалению, в css

input:focus -+ label { ... }

будет прекрасным.

с меткой после ввода будет dooable:

input:focus + label { ... }

вы можете использовать некоторое позиционирование для отображения до...

Ответ 2

Вы можете использовать селектор атрибутов:

label[for=inputelement]:focus,
label[for=inputelement]:active {
    /*styles here*/
}

Обратите внимание, что это не поддерживается IE6, но должно работать во всех других браузерах, включая IE7 и IE8.

Это, очевидно, будет работать только для этого идентификатора. Если вы хотите, чтобы он работал для всех идентификаторов, просто оставьте ID:

label[for]:focus,
label[for]:active {
    /*styles here*/
}

Теперь это будет работать для всех меток с атрибутом for.

Если вам что-то нужно, вам нужно будет использовать классы.

Ответ 3

ОБНОВЛЕНО

Убедитесь, что вы проверили черновик, поскольку это может измениться: https://drafts.csswg.org/selectors-4/#relational

Реляционный псевдокласс: has() позволит выбрать родителей, например, следующий селектор соответствует только элементам <a> которые содержат дочерний элемент <img>:

a:has(> img)

Это может быть объединено с другими селекторами, такими как :focus :active или :not чтобы предложить большой потенциал.

К сожалению, поддержка браузера не очень хороша на момент написания: https://caniuse.com/#feat=css-has

Добавление этого для людей, которые найдут эту страницу в будущем. У CSS4 будет родительский селектор, позволяющий вам выбрать, к какому элементу применить стиль:

Я думаю, что текущая спецификация позволяет вам указать, какой элемент соответствует a! знак - субъект выбора.

label! > input {
  font-weight: bold;
}

Это дает гораздо больший контроль, чем просто родитель, например, в этой страшной цепочке под тегом p находится цель!

article > h1 + section > p! > b > a {
  font-style: italic;
}

Ответ 4

Вы можете, пока label следует за input в методе:

input:focus + label,
input:active + label {
    /* style */
}

Ответ 5

Введите кнопку ввода класса стиля

стиль css:

INPUT.book:hover, INPUT.book:focus:hover {
    background-image:url(book_over.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

INPUT.book {
    background-image:url(book_active.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

и ввод html:

<input name="Bestil2" type="submit" class="book"  value="Book møde" />

Я еще не понял, как избежать серого фона, даже если у меня есть прозрачный png файл, возможно, только jpg. Но я надеюсь, что это поможет. Удачи: -)

Ответ 6

Это можно сделать, если вы настроили таргетинг на браузеры, поддерживающие flexbox - см. это: http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview

Для краткости, css там минимален, но вам понадобятся некоторые префиксы, специфичные для браузера, для расширения поддержки нескольких старых браузеров.

Ответ 7

Для полноты, если ваше поле ввода находится внутри метки, вы можете использовать focus-inside:

HTML:

<label>
   <input name="example" type="text">
</label>

CSS:

label:focus-within {
   background: #DEF;
}