MrPeanut MrPeanut - 2 months ago 8
CSS Question

Fill width of div with HTML5 number field

I have a form with an HTML5 number field and a submit button. I want the submit button to be its natural width and my number field to fill the rest of the form's container. My code looks like this.

<div class="form">
<div class="input">
<input type="number" name="test">
</div>
<div class="submit">
<input type="submit" value="Search">
</div>
</div>


CSS

.form {
overflow: hidden;
padding: 10px;
background: lightblue;
}

input {
padding: 14px;
}

input[type="number"] {
width: 100%;
}

.input {
float: left;
padding: 14px;
}

.submit {
float: left;
padding: 11px 0;
}


My problem seems to be setting a fluid width on the
input[type="number"]
.

Example: https://jsfiddle.net/ca4pkjxm/2/

Answer

Flexbox can do that.

* {
  font-family: sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#phone-280 {
  width: 280px;
  border: 1px solid gray;
  margin: 0 auto;
  margin-bottom: 50px;
}
#phone-400 {
  width: 400px;
  border: 1px solid gray;
  margin: 0 auto;
}
.form {
  width: 100%;
  padding: 10px;
  background: lightblue;
  display: flex;
  align-items: center;
}
input {
  padding: 14px;
  width: 100%;
}
input[type="number"] {
  width: 100%;
}
.input {
  padding: 14px;
  flex: 1;
}
.submit {
  padding: 11px 0;
}
<div id="phone-280">
  <div class="form">
    <div class="input">
      <input type="number" name="test">
    </div>
    <div class="submit">
      <input type="submit" value="Search">
    </div>
  </div>
</div>

<div id="phone-400">
  <div class="form">
    <div class="input">
      <input type="number" name="test">
    </div>
    <div class="submit">
      <input type="submit" value="Search">
    </div>
  </div>
</div>