用CSS处理HTML表单

我一直在研究一些表单，我不确定如何定制它们。用CSS处理HTML表单

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>

来源

2013-01-12 Paul Ferris

到底什么是（意外）行为？你能举个例子吗？ – Pankrates

你有没有尝试'输入[类型=“提交”]'？ – Scott

jsfiddle请 –

的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公司的一个意思是指谷歌的字体使用该名称。在这种情况下，请勿设置font-weight，因为该字体仅以普通（400）字体存在。如果您尝试将权重设置为500，大多数浏览器都忽略它，但有些可能会应用算法粗体，这会产生可疑的结果。

请注意，设置背景颜色也会改变基本渲染方式：默认按钮（通常在现代浏览器中具有圆角）会转向具有奇怪边框的矩形框。您可以通过在input元素上设置各种border属性（包括border-radius）来更改此属性。重点在于按钮在浏览器中具有内置呈现功能，但是如果您设置了某些关键的CSS属性，则此呈现会改变为不同的内容，并且您应该考虑在相关时设置不同的其他属性。

P.S.由于大部分颜色对比度不足，按钮变得几乎难以辨认，而Unica One并不适合这样使用。

来源

2013-01-12 21:37:18

对比不应该是一个问题 - 父div具有0.4的不透明度，所以＃666从暗灰色变为多云白色。 –

这工作完美，谢谢:) –

试试这个给CSS的表单输入提交按钮由斯科特说

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

来源

2013-01-12 21:03:51 wilsonrufus

用CSS处理HTML表单

回答

相关问题