输入宽度自动调整仅使用纯 CSS

Question

我想让输入可伸缩，我可以通过将 <input> 替换为 <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>

Answer 1

这是可行的解决方案，

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" />

Answer 2

试试这个

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

输入宽度自动调整仅使用纯 CSS

Input width auto adjust using pure CSS only

html

css

input