web-dev-qa-db-ja.com

フォームの送信ボタンのサイズを編集する方法は？

こんにちは、送信ボタンの画像は必要ないので、デフォルトの送信ボタンを使用しましたが、幅と高さを編集します。それ、どうやったら出来るの？

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

ありがとう！

ジェームス

htmlcssforms
47
James

CSSを使用すると、ID（＃）セレクターを使用してその特定のボタンのスタイルを設定できます。

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

または、すべての送信ボタンを特定のサイズにする場合：

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

または、ボタンの特定のクラスを特定のスタイルにしたい場合は、CSSクラスを使用できます。

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

そして

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

Emsを測定単位として使用するのは、それらが スケーリングを改善する傾向がある であるためです。

52
Paul Grime

高さと幅のオプションでスタイル属性を使用するだけです

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

以下を使用して高さを変更します。

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

これを要件に合わせて使用​​します。

7
Vikas

CSSで高さと幅を変更できます：

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

ただし、OSXのサファリではほとんどの入力ボタンスタイルが無視されることに注意してください。

6
spike

CSS を使用します。

<head>タグ内（#searchは「searchのIDを持つ要素」を意味します）

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

または、<input>タグでインライン

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

Css heightおよびwidthプロパティを使用します。

これをMacで機能させるには、buttonのborderをnoneに設定する必要もあります。

3
Matt

簡単だ！最初に、ボタンに<input type="button" value="I am a button!" id="myButton" />などのidを付けます。次に、高さと幅にCSSコードを使用します。

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

次のCSSも実行できます。

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

しかし、それはページ上のすべてのボタンに影響します。

作業例- JSfiddle

1
1010

Style = "width：auto"を追加するだけです

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

これはIE、Firefox、Chromeでうまくいきました。

0
user972255