Is it possible to set the width of an input element dynamically using only CSS?

Question

HTML:

<div>
    abc
    <input />
</div>

CSS:

div {
    width:80%;
    background-color:yellow;
}
input {
    width:90%;
}

I would like to know if there is a pure CSS way to modify an input element width, adjusting to the available space left.

Thanks.

"links to jsfiddle.org must be accompanied by code"

Reger
– Reger

2014-02-05 16:13:43 +00:00
Commented Feb 5, 2014 at 16:13 — Reger
– Reger, Commented Feb 5, 2014 at 16:13
I added code and JSFiddle from the link he partially gave.

Albzi
– Albzi

2014-02-05 16:14:42 +00:00
Commented Feb 5, 2014 at 16:14 — Albzi
– Albzi, Commented Feb 5, 2014 at 16:14

Hashem Qolami · Accepted Answer · 2014-02-05 16:29:49Z

3

As a pure CSS solution, you could wrap around the <input> by a container <div> and hide the horizontal overflow of the box with overflow-x: hidden;.

Then float the text to the left, using a <label> element:

HTML:

<label>abc</label>
<div class="wrapper">
    <input />
</div>

CSS:

.wrapper { overflow-x: hidden; }
label { float: left; }
input { width:100%; box-sizing: border-box; }

JSFiddle Demo

edited Feb 5, 2014 at 16:29

answered Feb 5, 2014 at 16:23

Hashem Qolami

99.8k27 gold badges157 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to set the width of an input element dynamically using only CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related