Как изменить размер кнопки отправки в форме?

Привет, я не хочу изображение для моей кнопки отправки, поэтому я пошел с кнопкой отправки по умолчанию, но я хочу отредактировать ее ширину и высоту. Как это сделать?

<input type="submit" id="search" value="Search"  />

Спасибо!

Джеймс

Ответ 1

С помощью CSS вы можете установить стиль для этой конкретной кнопки с помощью селектора id (#):

#search {
    width: 20em;  height: 2em;
}

или если вы хотите, чтобы все кнопки отправки были определенного размера:

input[type=submit] {
    width: 20em;  height: 2em;
}

или если вы хотите, чтобы определенные классы кнопок были определенным стилем, вы можете использовать классы CSS:

<input type="submit" id="search" value="Search" class="search" />

input.search {
    width: 20em;  height: 2em;
}

Я использую ems в качестве единицы измерения, потому что они имеют тенденцию масштабироваться лучше.

Ответ 2

просто используйте атрибут style с параметром высоты и ширины

<input type="submit" id="search" value="Search"  style="height:50px; width:50px" />

Ответ 3

Измените высоту с помощью:

input[type=submit] {
  border: none; /*rewriting standard style, it is necessary to be able to change the size*/
  height: 100px;
  width: 200px
}

Ответ 4

<input type="button" value="submit" style="height: 100px; width: 100px; left: 250; top: 250;">

Используйте это с вашими требованиями.

Ответ 5

Вы можете изменить высоту и ширину с помощью css:

#search {
     height: 100px;
     width: 400px;
}

Стоит отметить, что сафари на OSX игнорирует большинство стилей кнопок ввода.

Ответ 6

Используя CSS.

Либо внутри тэга <head> (#search означает "элемент с идентификатором search" )

<style type="text/css">
    input#search
    {
        width: 20px;
        height: 20px;
    }
</style>

Или внутри, в теге <input>

<input type="submit" id="search" value="Search"  style="width: 20px; height: 20px;" />

Ответ 7

Используйте свойства css height и width.

Чтобы это работало на Mac, вам также нужно установить button border в none.

Ответ 8

Это просто! Во-первых, дайте вашей кнопке id, например <input type="button" value="I am a button!" id="myButton" /> Затем, для высоты и ширины используйте код CSS:

.myButton {
    width: 100px;
    height: 100px;
}

Вы также можете сделать этот CSS:

input[type="button"] {
    width: 100px;
    height: 100px;
}

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

Рабочий пример - JSfiddle

Ответ 9

Просто добавьте стиль = "width: auto"

<input type="submit" id="search" value="Search" style="width:auto" />

Это работало для меня в IE, Firefox и Chrome.