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
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 .
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" />
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
}
<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 noter que Safari sur OSX ignore la plupart des styles de boutons de saisie.
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;" />
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
.
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
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.