(FCC Build a Survey) How can I get my dropdown input box to be the same size as the text input?

Link to CodePen: https://codepen.io/DebWeseigner/pen/abOVOEg

I’m pretty new to this so apologies if it’s rather simple. I can’t seem to get my input boxes to align to the same width and it’s driving my non-existent OCD crazy.

Thanks for any replies.

Hello and welcome to the forum :grin:!

Change the box sizing of the elements so they have the same appearance:

#email,
#name,
#number {
  width: 50%;
  height: auto;
  box-sizing: border-box;
}

#select-box {
  box-sizing: border-box;
  width: 50%;
}

Basically, the default box model for each is different, hence they have different default values:

/* Default box-sizing values: */
input {
  box-sizing: content-box
}

select {
  box-sizing: border-box
}

This is one of the reasons to use a CSS reset.

Thanks a million! CSS reset sounds mighty useful. Have a good one!

1 Like