Управление макетом форм с помощью CSS

Question

Im новый для CSS, так что несите меня! У меня есть следующий вид:

Я хочу, чтобы контролировать ширину входных текстовых полей (т.е. увеличить их, чтобы позволить более длинные имена). Если я использую следующий CSS, я могу добиться эффекта.

input { 
    width: 342px; 
} 

Однако это также увеличивает ширину кнопки и флажки, чтобы дать следующее:

Как контролировать длину каждого входа отдельно (и, возможно, в будущем каждый текстовое поле отдельно)? Должен ли я назначать класс каждому и управлять им отдельно?

Answer 1

Вы можете указать несколько классов для управления шириной и высотой полей формы и применять по мере необходимости. Я лично считаю, что это обычная практика (не требуется) сейчас, чтобы сделать входные данные на 100% шириной и использовать контейнеры для упаковки, чтобы настроить их ширину. Это имеет смысл, когда вы используете систему сетки, и вы хотите, чтобы все было более точно согласовано.

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

Вы можете попробовать таргетинг на определенные входы вместо оберточной элементов в контейнерах, или назначая ширины классов к каждому элементу, например, так:

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

Answer 2

вы можете дать элементы формы имя класса и их стиль как группа или вы можете ориентировать их в зависимости от типа или имени

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

вы можете использовать флажок/радио и т.д.

или вы можете с использованием

input[name=namehere] { //styles }