Question

我一直在处理某些表单，而且我不确定如何自定义它们。

This solution似乎有效，但在我的情况下，属性只是应用于表单周围的区域而不是表单本身。

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>

Answer 1

尝试将css提供给scott

所述的表单输入提交按钮

form.Forms input[type="submit"]{
    position:relative;
    top:100px;
    background-color:#666;
    font-family:'Unica One';
    font-weight:500;
}

Answer 2

CSS代码设置form元素的属性。显然你想要将其中一些应用到输入按钮，所以你需要将规则分成两个规则：

<!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属性，则此渲染会更改为不同的内容，并且在相关时也应考虑设置不同的其他属性。

P.S。由于色彩对比度不足，按钮几乎难以辨认，而且Unica One不适合这样使用。

使用CSS操作HTML表单

2 个答案: