CSS adaptive content width input box

Usually the input boxes we see are fixed width, but sometimes we also encounter adaptive content width, like this

There are two ways that I know so far, I believe it is not difficult to find

1. Set contenteditable="true" to the ordinary div tag, after setting inline-block, you can adapt the content width
2. Synchronize the input content of input to a transparent div, the parent width follows the width of the div, and then set the input to be absolutely positioned and cover it, and set the width to 100%

Both are very good solutions. This time I bring a new pure CSS implementation scheme, I believe it can bring a different feeling

One, replaceable elements

First of all, input is different from ordinary div elements, it is a replaceable element

In CSS, replaceable element ( replaced element ) is not controlled by CSS. These elements are an external object, and the rendering of their appearance is independent of CSS.

Under normal circumstances, if you want the width of an element to be determined internally, you can set

div{
  display: inline-block;
}

In CSS3, it can be achieved in another way

div{
  width: fit-content;
}

Still do not understand this attribute can refer to the article: understand CSS3 max / min-content such as width and fit-content value << Zhangxin Xu - Space Xin - Xin Life (zhangxinxu.com)

However, in the input, these are not easy to use, you can also see from the developer tools, the input has a layer of shadow-root

And the browser does not expose relevant selectors for developers to use, therefore, it is impossible to achieve adaptive content width only through conventional methods.

Two, underline style

What can you think of when you see the input box in the rendering? That's right, it's underscore. The underline is a text modification , which follows the text, so after removing the border of the input, add the underline

input{
  border: 0;
  outline: 0;
  text-decoration: 4px solid underline;
}

The effect is as follows

The underscore does come out, and it also follows the input, but it’s a bit too tight

Three, underline offset

In order to solve the above problem, a new CSS property text-underline-offset to indicate the offset position of the underline. At present, the compatibility is not bad, except IE, all major browsers support

Now, offset the underline a little bit

input{
  /* */
  text-underline-offset: 10px;
}

The underscore is missing! The following is text-underline-offset from 0px → 10px

This is due to the internal dimensions. The underline has already shifted out of the container. Try to add height to the input, such as

input{
  /* */
  height: 60px;
  text-underline-offset: 10px;
}

However, no effect

As you can see from the developer tools, the height set on the outside does not affect the internal size, so the inside is still the default height

So, is there any way to change the height?

The answer is line height line-height !

input{
  /* */
  line-height: 2;
  text-underline-offset: 10px;
}

The line height is a text attribute and can be inherited to the inside, so that the internal size is directly stretched, and the underline is also visible

Fourth, the default minimum width

Because the underline is used, when there is no content in the input box, or only placeholder , the underline does not exist, such as

<input placeholder="请输入...">

The effect is as follows

May feel a little unsightly, I hope to add a minimum width underline (of course it needs to be determined by design)

At this time, you can use a linear gradient to draw an underline.

input{
  background: linear-gradient(currentColor,currentColor) center bottom 6px no-repeat;
  background-size: 10rem 4px;
}

This will have an effect similar to the minimum width

It should be noted that the position of the underline and the position of the linear gradient should be consistent

Five, the style of focus

Now add a little focus style, it looks more like an input border, the underline needs to change the color, and then the linear gradient just now also needs to change the color

input:focus{
  text-decoration-color: dodgerblue;
  background-image: linear-gradient(dodgerblue,dodgerblue)
}

This achieves the effect at the beginning of the article

The complete code can be accessed: auto input (codepen.io)

Six, summary and explanation

The above introduces a new pure CSS solution that can achieve adaptive content width, using the usual underline-related styles that are not very eye-catching. If your project is not compatible with IE, you can use it with confidence. Yes, but even if you don’t need it, you can learn your ideas. The main points are summarized below:

1. input is a replaceable element
2. The underscore follows the text, not the container
3. There is now a brand new text-underline-offset can be used to control the offset of the underline
4. When the input is empty, the underscore will disappear
5. Use CSS gradients to draw an underline
6. The underline color can be modified by text modification color text-decoration-color

When there is a small detail, the input is actually set to a width of 100%, that is, the entire line can be input, but it looks like the underlined part is the input box visually, which is a small blind trick. If you think it's not bad, if it is helpful to you, please like, bookmark, and forward ❤❤❤