Comment modifier la taille du bouton submit d'un formulaire?
Salut Je ne veux pas d'image pour mon bouton submit donc j'ai choisi le bouton submit par défaut mais je veux éditer sa largeur et sa hauteur. Comment dois-je faire?
<input type="submit" id="search" value="Search" />
Merci!
James
9 réponses
en utilisant CSS vous pouvez définir un style pour ce bouton spécifique en utilisant le sélecteur id ( # ):
#search {
width: 20em; height: 2em;
}
ou si vous souhaitez que tous les boutons de soumission à une taille particulière:
input[type=submit] {
width: 20em; height: 2em;
}
ou si vous voulez que certaines classes de bouton à un style en particulier, vous pouvez utiliser des classes CSS:
<input type="submit" id="search" value="Search" class="search" />
et
input.search {
width: 20em; height: 2em;
}
j'ai utiliser ems comme unité de mesure parce qu'ils tendance à l'échelle de mieux.
utilisez simplement l'attribut style avec l'option hauteur et largeur
<input type="submit" id="search" value="Search" style="height:50px; width:50px" />
Changer la hauteur à l'aide de:
input[type=submit] {
border: none; /*rewriting standard style, it is necessary to be able to change the size*/
height: 100px;
width: 200px
}
<input type="button" value="submit" style="height: 100px; width: 100px; left: 250; top: 250;">
Utilisez ceci avec vos exigences.
Vous pouvez changer la hauteur et la largeur avec css:
#search {
height: 100px;
width: 400px;
}
il est intéressant de souligner que safari sur OSX ignore la plupart des styles de boutons d'entrée, cependant.
en utilisant CSS.
Soit à l'intérieur de votre <head> balise (#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 <input> la balise
<input type="submit" id="search" value="Search" style="width: 20px; height: 20px;" />
utilisez le css height et width propriétés.
Pour que cela fonctionne sur Mac, vous devez également définir l' buttonbordernone.
C'est facile!
Tout d'abord, donnez votre bouton un id<input type="button" value="I am a button!" id="myButton" />
Ensuite, pour la hauteur et la largeur, utilisez le code CSS:
.myButton {
width: 100px;
height: 100px;
}
Vous pourriez aussi le faire en CSS:
input[type="button"] {
width: 100px;
height: 100px;
}
mais cela affecterait tous les boutons de la Page.
exemple pratique - JSfiddle
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.