CSS на полях ввода

Question

У меня проблема с оформлением различных полей формы с помощью CSS

У меня есть код CSS:

#form input {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}

Теперь этот код стилизует все три поля ввода, которые у меня есть (ниже)но также стилизует кнопку отправки изображения, которая у меня есть

<input type="text" class="text" name="email" id="email">
<input type="password" value="" name="password" id="password">
<input name="button" type="image" src="go.jpg" alt="Submit" align="right">

Итак, я изменяю CSS и создаю:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

Это предотвращает стилизацию CSS кнопки отправки изображения, но теперь этоне стилизовать поле пароля - поэтому я попытался:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.password {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

Но это никак не повлияло.

Итак, вопрос в том, как эффективно разрешить стилизацию CSS для ввода текста и ввода.поля пароля - но не для стилизации кнопки отправки изображения?

Заранее спасибо!

Answer 1

Существует опция, которую можно добавить

Для текстовых полей

#form input[type=text] {}

Для полей пароля

#form input[type=password] {}

Для полей кнопок

#form input[type=button] {}

Или просто добавьте в поле пароля класс, который является паролем.

Answer 2

Что вам нужно исследовать, это css selectors: Селектор CSS для полей ввода текста? .

#form input[type="text"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;width: 200px;
}
#form input[type="password"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}
#form input[type="button"] {
    border: 0px;
}

Answer 3

просто удалите вторую строку в вашем css и добавьте «текстовый» класс к вашему типу ввода пароля.Неверная версия ниже:

CSS:

#form input.text {border: 1px solid #FFFFFF;font-size: 16px;padding: 5px;width: 200px;}
#form input.button {border: 0px)

HTML:

<input type="text" class="text" name="email" id="email">
<input type="password" value="" name="password" id="password">
<input name="button" type="image" src="go.jpg" alt="Submit" align="right">

Answer 4

ФОРМА "Входы" в CSS:

Ввод текста:

input[type="text"] {...} /* normal (one row) text input */
textarea {...} /* multiline text input */
input[type="password"] {...} /* password masked input */

Кнопка:

input[type="button"] {...}
input[type="submit"] {...} /* type of button - submitting the form */
input[type="reset"] {...} /* clean (reset) whole form "inputs" */

Checkbox:

input[type="checkbox"] {...}

RadioGroup:

input[type="radio"] {...}

Раскрывающийся список:

select {...}
select optgroup{...} /* group od values in dropdown list */
select option{...} /* value to choose in dropdown list */

Answer 5

Вы могли бы сделать это

Не стилизуйте элемент input сам по себе, а вместо этого нацеливайте только те элементы, которые вам нужны.

Во-первых, избавьтесь от этой CSS

#form input {/* styles here*/}

Тогда сделай это

#form input.text, #form input#password{
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}

Запятая разделяет два элемента, но применяет CSS к каждому.

Тогда вам не нужно «сбрасывать» границу на кнопке отправки изображения.

Кстати, ваш пароль input имеет id в соответствии с вашим кодом, а не class, поэтому вам нужно # вместо ..

Answer 6

Вы не ставили класс на свои входы? .passwords означает, что в вашем html

class = "password"

Answer 7

Вам не хватает классов .password и .button в вашем html.

<input type="text" class="text" name="email" id="email">
<input type="password" class="password" value="" name="password" id="password">
<input name="button" class="button" type="image" src="go.jpg" alt="Submit" align="right">

Answer 8

Используйте тип ввода как часть вашего селектора:

#form input[type="text"] {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}

Это селектор атрибута .

Вы всегда можете просто добавить классВаши поля ввода:

<input type="text" class="styled" name="email" id="email">
<input type="password" value="" class="styled" name="password" id="password">

С:

#form input.styled {
    border: 1px solid #FFFFFF;
    font-size: 16px;
    padding: 5px;
    width: 200px;
}