Как применить свойство только к кнопке отправки

#html #css

#HTML #css

Вопрос:

Я хотел бы нормализовать некоторые элементы на моей странице, например, добавить немного полей / отступов на кнопку отправки.

Пробовал с input.submit {margin:0; padding:1px 6px 1px 6px;} , но, похоже, это не работает. Как я могу это сделать, используя CSS 2.1?

Комментарии:

1. Не во всех браузерах CSS 2.1 реализован полностью. Есть ли какая-то особая причина, по которой вам нужно их поддерживать?

Ответ №1:

Наиболее надежно, я думаю, с CSS 2.1 у вас есть возможность применить class или id к кнопке или изолировать кнопку внутри определенного родительского элемента.

В противном случае CSS 2.1 поддерживает обозначение селектора атрибут =значение, поэтому:

 input[type=submit],
/* or */
button[type=submit]
  

Должно сработать. Это, однако, с разной степенью надежности в Internet Explorer (хотя, к моему удивлению), согласно PPK, относится к Quirksmode, доступному в IE> = 7.

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

Причина, по которой input.submit {margin:0; padding:1px 6px 1px 6px;} «не работает», заключается в том, что этот селектор input.submit будет выбирать input элементы с именем класса submit . Если вы не присвоили кнопке отправки это имя класса, в вашем html нет соответствующего элемента.

В jQuery есть возможность сопоставлять элементы отправки с помощью селектора $('input:submit') , но это недопустимый CSS-селектор (насколько я в настоящее время знаю); ближайшее, что может предложить CSS, это, как отмечалось выше, input[type=submit] .


Дополнительная ссылка: селектор CSS2 [attr], на Quirksmode.org .

Ответ №2:

ДА. input[type="submit"] является допустимым селектором CSS 2.1.

Источник: W3C CSS Селекторы

Комментарии:

1. Хорошо, я думал, что это CSS3. Думаю, я слишком долго работал, пытаясь заставить вещи выглядеть красиво в браузерах, которые даже не полностью поддерживают CSS2.

Ответ №3:

В браузерах, совместимых с CSS3, вы могли бы использовать:

 input[type="submit"] {margin:0; padding:1px 6px 1px 6px;}
  

Если вы не можете использовать CSS3, вам придется установить класс для входных данных отправки:

 <input type="submit" class="submit" value="Submit form" />
  

Комментарии:

1. Смотрите дополнение к моему ответу.

2. input[type=submit] является допустимым в CSS2.

3. Хорошо, я думал, что это CSS3. Думаю, я слишком долго работал, пытаясь заставить вещи выглядеть красиво в браузерах, которые даже не полностью поддерживают CSS2.