Css input auto with

Auto-Growing Inputs & Textareas

By default, and elements don’t change size based on the content they contain. In fact, there isn’t any simple HTML or CSS way to make them do that. Kinda funny, as that seems like a reasonable use-case. But of course, there are ways, my friend. There are always ways. I was thinking about this after Remy Sharp blogged about it recently in the context of inline elements.

Non-input elements expand naturally

It’s weird to me that there is no way to force an input element to mimic this behavior, but alas. We can make any element editable and input-like with the contenteditable attribute:

That will naturally grow to be the width it needs to be for the content it contains. If it was a or any other element that is block-level, it would also expand vertically as needed.

But are non-input elements accessible?

1. What about the fact that forms can be submitted with the Enter key?
2. What about the idea that form data is often serialized and sent along, while the code that’s doing it probably isn’t looking for a span?
3. Does it actually read the same as an input in a screen reader?
4. What other things¹ do inputs naturally do that I’m not thinking of?

As attracted as I am to the idea that we can get auto-resizing for free from the browser by using non-input elements, I’m also a little worried about (my) unknown usability and accessibility risk.

Resizing actual input elements

So let’s say we stick with and . Can we make them resize-able even though it’s not particularly natural?

One idea I had is to wrap the input in a relative inline parent and absolutely position it inside. Then, with JavaScript, we could sync the input value with a hidden span inside that wrapper, pushing the width wider as needed.

For textareas, one classic technique is to count the number of line-breaks, use that to set the height, then multiply it by the line-height. That works great for preformatted text, like code, but not at all for long-form paragraph-like content.

Here are all these ideas combined.

Shaw has a little JavaScript one-liner that is very clever. The JavaScript sets a data-* attribute on the element equal to the value of the input. The input is set within a CSS grid, where that grid is a pseudo-element that uses that data-* attribute as its content. That content is what stretches the grid to the appropriate size based on the input value.

I absolutely know that you fellow web nerds have solved this six ways to Sunday. Let’s see ’em in the comments.

1. Eric Bailey hit me up with a few thoughts off the top of his head: (1) There’s no accessible name. (2) It probably won’t work with voice control. (3) It will get ignored in High Contrast Mode.

Источник

CSS :autofill селектор

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Псевдокласс :auto-fill в CSS позволяет нам стилизовать элементы , которые содержат контент, автоматически заполняемый браузером.

В качестве примера возьмем форму регистрации нового пользователя. Вы когда-нибудь нажимали на поле ввода и видели раскрывающийся список предложений для вставки?

Заметили, что автозаполненные поля имеют желтый фон? Вот как браузер стилизует поле, когда оно содержит автоматически заполняемый контент. :auto-fill позволяет нам переопределить или расширить это с помощью наших собственных стилей.

Когда происходит автозаполнение?

Это немного сложный вопрос, потому что у каждого браузера есть свои настройки, которые позволяют пользователю включать или отключать автозаполнение.

Таким образом, вы устанавливаете стили автозаполнения для ввода с помощью :auto-fill, но это не означает, что это действительно произойдет. Пользователь должен включить автозаполнение в настройках браузера, чтобы функция работала и применялись стили.

Автозаполнение может произойти, когда атрибут автозаполнения применяется к инпуту формы:

Но атрибут является скорее советом, чем жестким правилом, потому что нет возможности переопределить настройку браузера автозаполнения непосредственно в CSS, если она отключена. HTML Living Standard, кажется, поддерживает это в примечании:

Одним из способов автозаполнения может быть использование атрибута autocomplete, но браузеры могут выполнять автозаполнение даже без этого атрибута.

И в большинстве случаев так оно и есть — по крайней мере, в нашем тестировании.

Переопределение: стили автозаполнения

Браузеры часто используют собственные стили. Мы называем эти стили пользовательского агента (UA), и они являются причиной того, что у нас есть такие вещи, как сброс CSS, чтобы переопределить их для согласованных исходных стилей кросс-браузера.

Ранее мы видели, что Chrome применяет светло-желтый фоновый цвет к автозаполненному контенту. Стили UA Chrome включают:

input:-internal-autofill-selected

Согласно MDN, переопределить эти стили — это то, что мы не можем сделать в CSS, но этот фрагмент от Джеффа, кажется, делает свое дело, используя вставку box-shadow для изменения цвета фона при использовании -webkit-text-fill-color для изменить цвет текста:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus

Демо

Вот простая форма регистрации, которая принимает несколько входных данных. Обратите внимание, что при автоматическом заполнении информации для свойства схемы запускается анимация. Но, эй, убедитесь, что у вас включено автозаполнение в настройках вашего браузера, чтобы оно работало. Даже в этом случае браузеру может потребоваться захватить и сохранить информацию для полей, прежде чем он сможет делать предложения.

Источник