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 到表单输入提交按钮，正如 scott 所说

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 回答
1

formCSS 代码设置元素的属性。显然您想将其中一些应用到输入按钮，因此您需要将规则分成两个规则：

<!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>

I presume Unica One is meant to refer to a Google font with that name. In that case, do not set font-weight, since that font exists as normal (400) typeface only. If you try to set the weight to 500, most browsers ignore it but some may apply algorithmic bolding, which produces questionable results.

Note that setting the background color changes the basic rendering too: the default button, usually with rounded corners in modern browsers, turns to a rectangular box with a bit odd border. You can change this by setting various border properties (including border-radius) on the input element. The point is that buttons have built-in rendering in browsers, but if you set certain crucial CSS properties, this rendering changes to something different, and you should consider setting different other properties as well, when relevant.

P.S. The button becomes almost illegible, due to insufficient color contrast mostly, and Unica One isn’t really suitable for use like this.

于 2013-01-12T21:37:18.727 回答