it-swarm.com.de

Wie bearbeite ich die Größe der Senden-Schaltfläche in einem Formular?

Hallo, ich möchte kein Bild für meine Senden-Schaltfläche, daher habe ich die Standard-Senden-Schaltfläche verwendet, möchte aber deren Breite und Höhe bearbeiten. Wie mache ich das?

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

Vielen Dank!

James

47
James

Mit CSS können Sie einen Stil für diese bestimmte Schaltfläche festlegen, indem Sie den Selektor id (#) verwenden:

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

oder wenn alle Submit-Buttons eine bestimmte Größe haben sollen:

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

oder wenn Sie möchten, dass bestimmte Klassen von Schaltflächen einem bestimmten Stil entsprechen, können Sie CSS-Klassen verwenden:

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

und

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

Ich benutze ems als Maßeinheit, weil sie neigen dazu, besser zu skalieren .

52
Paul Grime

verwenden Sie einfach das style-Attribut mit der Option height und width

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

Ändern Sie die Höhe mit:

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

Verwenden Sie dies mit Ihren Anforderungen.

7
Vikas

Sie können Höhe und Breite mit CSS ändern:

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

Es ist jedoch erwähnenswert, dass Safari unter OSX die meisten Eingabeschaltflächenstile ignoriert.

6
spike

Verwenden Sie CSS .

Entweder in deinem <head> tag (das #search bedeutet "das Element mit der ID search")

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

Oder inline in Ihrem <input> Etikett

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

Verwenden Sie die Eigenschaften css height und width.

Damit dies auf einem Mac funktioniert, müssen Sie auch den button des border auf none setzen.

3
Matt

Das ist einfach! Geben Sie Ihrer Schaltfläche zunächst ein id wie <input type="button" value="I am a button!" id="myButton" /> Verwenden Sie dann für Höhe und Breite den CSS-Code:

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

Sie könnten auch dieses CSS machen:

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

Dies würde sich jedoch auf alle Schaltflächen auf der Seite auswirken.

Arbeitsbeispiel - JSfiddle

1
1010

Füge einfach style = "width: auto" hinzu

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

Dies hat bei mir in IE, Firefox und Chrome funktioniert.

0
user972255