用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表單

回答

相關問題