Controlling the Layout of Forms with CSS

Question

Im new to CSS so bear with me! I have the following form:

I want to control the width of the input text fields (ie increase them to allow longer names). If I use the following CSS I can achieve the effect.

input {
    width: 342px;
}

However it also increases the width of the button and the checkboxes to give the following:

How do I control the length of each input separately (and possibly in the future each text box separately)? Do I have to assign a class to each and control them separately?

Answer 1

You could specify a few classes to manage the width/height of form fields, and apply as needed. I personally think it's common (not required) practice now-a-days to make inputs 100% wide, and use wrapping containers to adjust the width of them. This makes sense when you use a grid system and you want things to align more closely.

input[type="text"],
input[type="submit"],
select,
textarea {
  box-sizing: border-box;
  width: 100%;
}

You can try target specific inputs instead of wrapping elements in containers, or assigning width classes to each element, like so:

input[type="text"] {}
input[type="submit"] {}
select {}
textarea {}

Answer 2

you can give form elements a class name and style them as a group or you can target them based on type or name

input[type=input] { //styles all input boxs }
input[type=submit] { //styles for your submit button }

you can use checkbox/radio etc.

or you can target specifics by using

input[name=namehere] { //styles }