Как изменить размер кнопки отправки на форме? - PullRequest
Новая
       0

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

46 голосов
/ 10 сентября 2011

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

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

Спасибо!

Джеймс

Ответы [ 9 ]

59 голосов
/ 10 сентября 2011

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

<input type="submit" id="search" value="Search"  style="height:50px; width:50px" />
52 голосов
/ 10 сентября 2011

Используя CSS, вы можете установить стиль для этой конкретной кнопки, используя селектор идентификатора (#): 

#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 в качестве единицы измерения, потому что они имеет тенденцию лучше масштабироваться .

8 голосов
/ 20 июля 2014

Измените высоту, используя: 

input[type=submit] {
  border: none; /*rewriting standard style, it is necessary to be able to change the size*/
  height: 100px;
  width: 200px
}
7 голосов
/ 08 июля 2015 
<input type="button" value="submit" style="height: 100px; width: 100px; left: 250; top: 250;">

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

6 голосов
/ 10 сентября 2011

Использование 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;" />
6 голосов
/ 10 сентября 2011

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

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

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

3 голосов
/ 22 июня 2016

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

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

1 голос
/ 09 февраля 2016

Это просто! Сначала дайте вашей кнопке 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

0 голосов
/ 31 марта 2017

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...