0

いくつかのフォームに取り組んでいますが、それらをカスタマイズする方法がわかりません。

この解決策は機能しているように見えますが、私の場合、プロパティはフォーム自体ではなく、フォームの周囲の領域に単純に適用されます。

CSS:

.Forms{
    position:relative;
    top:100px;
    background-color:#666;
    font-family:'Unica One';
    font-weight:500;
}

HTML:

<form action="" method="post" class="Forms" id="Form1">
    <input type="submit" value="Email Zoltan (Financial Manager, Director)" />
    <input type="hidden" name="button_pressed" value="1" />
</form>
4

2 に答える 2

1

CSS コードはform要素のプロパティを設定します。どうやら、それらのいくつかを代わりに入力ボタンに適用したいので、ルールを 2 つのルールに分割する必要があります。

<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Unica+One'
  rel='stylesheet'>
<style>
.Forms {
    position: relative;
    top: 100px; 
}
.Forms input[type=submit] {
    background-color: #666;
    font-family: 'Unica One';
}
</style>
<form action="" method="post" class="Forms" id="Form1">
    <input type="submit" value="Email Zoltan (Financial Manager, Director)" />
    <input type="hidden" name="button_pressed" value="1" />
</form>

Unica One は、その名前の Google フォントを参照することを意図していると思います。その場合、font-weightそのフォントは通常の (400) 書体としてのみ存在するため、 を設定しないでください。重みを 500 に設定しようとすると、ほとんどのブラウザーはそれを無視しますが、一部のブラウザーはアルゴリズムの太字を適用する場合があり、疑わしい結果が生成されます。

背景色を設定すると、基本的なレンダリングも変更されることに注意してください。デフォルトのボタンは、通常、最新のブラウザーでは角が丸くなっていますが、少し変わった境界線を持つ長方形のボックスに変わります。borderこれは、要素にさまざまなプロパティ ( を含むborder-radius) を設定することで変更できますinput。要点は、ボタンにはブラウザーに組み込みのレンダリングがあるということですが、特定の重要な CSS プロパティを設定すると、このレンダリングは別のものに変更されます。関連する場合は、他の別のプロパティも設定することを検討する必要があります。

PS ボタンは色のコントラストが不十分なため、ほとんど判読できなくなります。Unica One は、このような使用にはあまり適していません。

于 2013-01-12T21:37:18.727 に答える
1

これを試して、スコットが言ったようにフォーム入力送信ボタンにcssを与えてください

form.Forms input[type="submit"]{
    position:relative;
    top:100px;
    background-color:#666;
    font-family:'Unica One';
    font-weight:500;
}
于 2013-01-12T21:03:51.013 に答える