Input width auto adjust using pure CSS only

Question

I want to make input stretchable, I can achieve this by replacing <input> with <div></div>

.newsletter:after {
  content: '';
  clear: both;
  display: table;
}
.submit-button {
  float: right;
}
.email-input {
  overflow: hidden;
  background: #f1f1f1;
  border: 1px solid #000;
}

<div class="newsletter">
  <button class="submit-button" title="Subscribe" type="submit">Go</button>
  <input type="email" class="email-input" title="Sign up for our newsletter" value="email">
</div>
<div class="newsletter">
  <button class="submit-button" title="Subscribe" type="submit">Go</button>
  <div class="email-input">want to make input like this</div> <!-- just for ref only -->
</div>

give width:100% to email-input.

ketan
– ketan

2015-04-10 12:20:58 +00:00
Commented Apr 10, 2015 at 12:20 — ketan
– ketan, Commented Apr 10, 2015 at 12:20
it is going to next line bro :)

w3debugger
– w3debugger

2015-04-10 12:21:54 +00:00
Commented Apr 10, 2015 at 12:21 — w3debugger
– w3debugger, Commented Apr 10, 2015 at 12:21

Aru · Accepted Answer · 2015-04-10 12:38:11Z

3

try this

Html

<div class="newsletter">
    <button class="submit-button" title="Subscribe" type="submit">Go</button>
    <input type="email" class="email-input" title="Sign up for our newsletter" value="email">
</div>
<div class="newsletter">
    <button class="submit-button" title="Subscribe" type="submit">Go</button>
    <input type="email" class="email-input1" title="Sign up for our newsletter" value="email">
    <div class="email-input">want to make input like this</div>
    <!-- just for ref only -->
</div>

Css

*{
    border:0;
    padding:0;
}
.newsletter:after {
  content: '';
  clear: both;
  display: table;
}
.submit-button {
  float: right;
    width:50px;
}
.email-input {
  overflow: hidden;
  background: #f1f1f1;
  border: 1px solid #000;
}
.email-input1{
    width: 100%;
    width: calc(100% - 60px);
    background: #f1f1f1;
  border: 1px solid #000;
}

Fiddle Demo

answered Apr 10, 2015 at 12:38

Aru

1,8701 gold badge13 silver badges15 bronze badges

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

1 Comment

w3debugger Over a year ago

Is calc() good for cross browser testing? I've seen caniuse.com/#feat=calc there, it is good technique :) Thanks

Madhu · Accepted Answer · 2015-04-10 12:37:02Z

0

Here is The Working solution,

DEMO

CSS

field {
  font-family:arial,sans-serif;
  border-color: #d9d9d9;
  border-top:solid 1px #c0c0c0;
 }

input.field{
  width:90%;
}
.fieldwrapper{
  white-space: nowrap;
}

html

<div class="fieldwrapper">
<input id="field_location" class="field r2" placeholder="Email" id="Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Go" />

answered Apr 10, 2015 at 12:37

Madhu

2,8336 gold badges22 silver badges34 bronze badges

Collectives™ on Stack Overflow

Input width auto adjust using pure CSS only

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related