Learn HTML Forms by Building a Registration Form. input, textarea, select WIDTH not the same

After finishing this module I preceded to apply some of the knowledge learnt to one of my own little projects. On my page I have a similar look to the lesson however I am using from top to bottom an <input type="text> followed by a and then another set of <input type="text> followed by another element.

It then becomes obvious that the width of the select element is not the same as the <input type="text> element. The select element is slightly shorter. In fact if you look at the freeCodeCamp solution this is also the case. You don’t really notice it easily in the freeCodeCamp form because it is at the bottom of the page and only used once. Is there any fix for this?

All I could think of to do was to take out and separate select from here and give input and textarea a width of 99% -

input, textarea  { 
    margin: 10px 0 0 0;
    width: 99%;
    min-height: 2em;
}

then make a seperate

select  {
    width: 100%;
}

but it still looks kind of odd. Maybe it’s my browser? I should install a few other browsers and see how they render.

Can you provide the full html and css code that you have typed.

Sorry could you delete this forum post? I think my “Dark Reader” plugin was messing with the final rendering of the page.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.