it-swarm.it

Come modificare la dimensione del pulsante di invio su un modulo?

Salve, non voglio un'immagine per il mio pulsante di invio, quindi ho scelto il pulsante di invio predefinito, ma voglio modificarne la larghezza e l'altezza. Come lo faccio?

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

Grazie!

Giacomo

47
James

Utilizzando CSS puoi impostare uno stile per quel pulsante specifico usando il selettore id (#):

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

o se vuoi che tutti i pulsanti di invio abbiano una dimensione particolare:

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

o se vuoi che determinate classi di pulsanti siano uno stile particolare puoi usare le classi CSS:

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

e

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

Uso ems come unità di misura perché tendono a ridimensionarsi meglio .

52
Paul Grime

basta usare l'attributo di stile con l'opzione di altezza e larghezza

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

Cambia altezza usando:

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;">

Usalo con le tue esigenze.

7
Vikas

Puoi cambiare altezza e larghezza con css:

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

Vale la pena sottolineare che Safari su OSX ignora la maggior parte degli stili dei pulsanti di input.

6
spike

Utilizzando CSS .

O all'interno del tuo <head> tag (il #search significa "l'elemento con un ID di search")

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

O in linea, nel tuo <input> tag

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

Utilizzare le proprietà css height e width.

Perché funzioni su Mac, devi anche impostare button 's border su none.

3
Matt

Questo è facile! Innanzitutto, dai al tuo pulsante un id come <input type="button" value="I am a button!" id="myButton" /> Quindi, per altezza e larghezza, usa il codice CSS:

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

Puoi anche fare questo CSS:

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

Ma ciò influenzerebbe tutti i pulsanti della Pagina.

Esempio di funzionamento - JSfiddle

1
1010

Aggiungi style = "width: auto"

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

Questo ha funzionato per me in IE, Firefox e Chrome.

0
user972255