Кнопка ввода не отвечает на CSS

0

У меня есть кнопка ввода, которая должна быть огромной. Однако с нынешним CSS он только расширяется. Высота не трогается.

HTML:

<form action="feedback.cfm" method="POST">
    <input type="hidden" name="send" value="mail" />
    <input class="hugeButton" type="submit" value="Click Me To Send A SpreadSheet Report" />
</form>

CSS:

<style type="text/css">
    .hugeButton {
        width:100%;
        height:45%;
        font-size:x-large;
    }
    .hugeButton:hover {
        cursor:pointer;
    }
</style>

Теперь, если я добавляю border:none к моему классу .hugeButton, свойство height работает.

Поэтому мой вопрос: почему граница кнопки ввода "отключает" свойство height?

ПРИМЕЧАНИЕ. Я использую Google Chrome.

  • 1
    Это не полный ответ, но вам, возможно, лучше повезет, стиль <button type = "submit"> <span> Нажмите, чтобы отправить электронную таблицу </ span> </ button> вместо синтаксиса input type = "submit" ,
  • 0
    @JoshC, так что удаление границы вокруг ввода моей кнопки превращает ее в встроенную кнопку?
Показать ещё 8 комментариев
Теги:
macos

2 ответа

1
Лучший ответ

Вы должны дать документу высоту, так как высота вашей кнопки будет относительно высоты вашего предка. Добавить:

html,body,form {
    height:100%;
}

Пример jsFiddle

Поделиться
  • 1
    Э-э, это не работает. Кнопка по-прежнему нормальная высота с рамкой. Без границы это работает.
  • 1
    Работает нормально. Какой браузер вы используете? Вы смотрели на скрипку?
Показать ещё 4 комментария
0

Я думаю, что это заканчивается довольно запутанно. Похоже, что значения по умолчанию для -webkit-появления - вот что здесь играет.

Когда я смотрю панель элементов в инструментах dev, я вижу следующие значения для -webkit-appearance:

  1. <button> (с рамкой): кнопка
  2. <input type="submit"> (с рамкой): кнопка
  3. <button> или <input type="submit"> (без кнопки): none

Я думаю, что -webkit-появление: кнопка является преступником.

Смотрите эту скрипту: http://jsfiddle.net/jameslafferty/KDFBE/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню