web-dev-qa-db-fra.com

Comment modifier la taille du bouton d'envoi d'un formulaire?

Bonjour, je ne veux pas d'image pour mon bouton d'envoi. Je suis donc parti avec le bouton d'envoi par défaut, mais je souhaite modifier sa largeur et sa hauteur. Comment je fais ça?

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

Merci!

James

htmlcssforms
47
James

En utilisant CSS, vous pouvez définir un style pour ce bouton spécifique à l'aide du sélecteur id (#):

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

ou si vous voulez que tous les boutons d'envoi aient une taille particulière:

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

ou si vous voulez que certaines classes de bouton soient d'un style particulier, vous pouvez utiliser des classes CSS:

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

et

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

J'utilise ems comme unité de mesure car ils ont tendance à mieux évoluer .

52
Paul Grime

il suffit d'utiliser l'attribut style avec les options height et width

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

Changer la hauteur en utilisant:

input[type=submit] {
  border: none; /*rewriting standard style, it is necessary to be able to change the size*/
  height: 100px;
  width: 200px
}
8
Saulo Santiago
<input type="button" value="submit" style="height: 100px; width: 100px; left: 250; top: 250;">

Utilisez ceci avec vos exigences.

7
Vikas

Vous pouvez changer la hauteur et la largeur avec css:

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

Il est intéressant de noter que Safari sur OSX ignore la plupart des styles de boutons de saisie.

6
spike

Utilisation de CSS .

Soit dans votre balise <head> (le #search signifie "l'élément avec un ID de search")

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

Ou en ligne, dans votre balise <input>

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

Utilisez les propriétés css height et width.

Pour que cela fonctionne sur Mac, vous devez également régler les button de border sur none.

3
Matt

C'est facile! Tout d’abord, attribuez à votre bouton une id telle que <input type="button" value="I am a button!" id="myButton" />. Puis, pour la hauteur et la largeur, utilisez le code CSS:

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

Vous pouvez aussi faire ce CSS:

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

Mais cela affecterait tous les boutons de la page.

Exemple de travail - JSfiddle

1
1010

Il suffit d'ajouter style = "width: auto"

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

Cela a fonctionné pour moi dans IE, Firefox et Chrome.

0
user972255