Responsive input text size

Question

From my understanding, the width of the element rendered by input tag with type attribute as text is decided by its size. (the other factor being the dimensions of the font active at that DOM node).

Without changing anything about the font, is it possible adjust the size attribute of the input tag "responsively", using only CSS?

The effect I'm looking to achieve is that for certain screen width's have the input size be, say, 20, and for others, I'd like it to be, say, 40.

I know the JS solutions. A no answer would be better than a JS solution. Thank you.

EDIT: Some more information, and in light of which my question might be a little too specific but I figured I'll ask anyway- the reason why I'm asking for it is because I'm using bootstrap with feedback icon. When I set width to 200% based on a certain screen-size, the feedback icon stays at its current position, I could change that but I'm not comfortable with that solution. Would anyone know why the feedback icon doesn't move appropriately?

Pandiyan Cool · Accepted Answer · 2015-02-27 07:01:14Z

2

Making measurement with % and em will make your elements responsive

e.g. input { width: 100%; padding: .5em 1em; }

answered Feb 27, 2015 at 7:01

Pandiyan Cool

6,5838 gold badges53 silver badges90 bronze badges

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

Comments

Ulrich Schwarz · Accepted Answer · 2015-02-27 06:36:15Z

1

It feels hackish, but you can set a font-size based on vw horizontal units. However, that will only constrain the width exactly for monospace webfonts (where you know how the ratio of width to height of the letters is).

      body {
      font-size: 14px; /*fallback for old browsers */
      font-size: calc(1.4*100vw/80);
      /* 1.4 is a fudge factor by inspection. */
      }

answered Feb 27, 2015 at 6:36

Ulrich Schwarz

7,7331 gold badge39 silver badges49 bronze badges

Collectives™ on Stack Overflow

Responsive input text size

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related