0
200
ViewsCSS width of input element's contents. min-content doesn't work for inputs
min-content and max-content don't seem to care about the input element's value:
input {
border: 1px solid black;
width: min-content;
}<input type="text">CSS totally ignores the input's value when figuring out min-content, just using some default width that never changes no matter the contents:
How can I make the CSS take the "content" (value) width into account:
Without using javascript to set width, min-width or max-width
·
Juan Pablo Isaza
1 answers
Answer question0
It is not possible without JavaScript.
You have to programmatically set the input's width to the length of its value. This can be simplified with the ch unit.
document.querySelector('input').addEventListener('input', function() {
this.style.width = this.value.length + 'ch'
})<input type="text">
·
Juan Pablo Isaza
Report
Answer question