CODEWITHSUNDEEP
htmlcss
DCR
DCR

Reputation: 15657

make select and input same height

How do I make the select and input elements have the same size? The code below has the select 1px taller then the input

#boats, #timepicker {
  font-size: 2vw;
  width: 15vw;
  text-align: center;
  border: solid 3px black;
  padding: 1px 2px;
  
  
 -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
}
<select id="boats" name="boats">
  <option disabled="" selected="" value="">Select Boat</option>
  <option value="Avrora">Avrora</option>
  <option value="Irlbach">Irlbach</option>
  <option value="Laura">Laura</option>  
</select>
<input id="timepicker" type="text" name="startTime">

Upvotes: 0

Views: 127

Answers (1)

user16249182
user16249182

Reputation:

Assign same height to both input and select, and use vertical-align to align two elements vertically.

vertical-align:top;
height:20px;


#boats, #timepicker {
  font-size: 2vw;
  width: 15vw;
  text-align: center;
  border: solid 3px black;
  padding: 1px 2px;
  
  /* Add this*/
  vertical-align:top;
  height:20px;
  
  
 -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
}
<select id="boats" name="boats">
  <option disabled="" selected="" value="">Select Boat</option>
  <option value="Avrora">Avrora</option>
  <option value="Irlbach">Irlbach</option>
  <option value="Laura">Laura</option>  
</select>
<input id="timepicker" type="text" name="startTime">

Upvotes: 1

Related Questions