輸入背景色破壞造型？

我正在創建一個在jQuery Validation下驗證的表單。我想將淺紅色背景顏色應用於無效且需要更正的輸入。輸入背景色破壞造型？

當我將background-color: #FFCCCC;應用於輸入時，吸引人的樣式似乎被刪除，而硬邊框替換它。例如，對於在Firefox文本輸入：

Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
（Live demo）

這發生多個瀏覽器。如果我設置了除#FFFFFF之外的其他background，也會發生這種情況。

有沒有辦法在應用背景顏色時保留樣式？

我打開Javascript模式，以某種方式模擬風格。

來源

2009-05-18 strager

查看正常輸入字段獲取邊界的樣式。並將其應用於錯誤之一。

來源

2009-05-18 22:44:18

請問您可以重新填寫表格嗎？我不確定你在說什麼。 = S – strager 2009-05-18 22:46:47

我認爲他意味着你應該查看默認樣式（邊框）並在設置背景後手動應用它們。我懷疑這會起作用，但因爲默認樣式不會因爲背景而改變。雖然控制器的渲染:) – Joey 2009-05-18 22:58:41

改變你的HTML是這樣的：

<p><input type="text" value="text" style="border:1px solid #999999;" /></p> 
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p>

編輯：如果你想讓它在所有瀏覽器一致的，不僅在Mozilla略圓，那麼你就必須做更多的事情工作。 Here's a link這將告訴你如何完全覆蓋文本框樣式。

來源

2009-05-18 22:48:37

此處瀏覽器正在使用其默認樣式。

我會建議添加類似下面的CSS到兩個輸入，然後他們會看起來一致。

border: solid 1px #ccc;

來源

2009-05-18 22:49:12

我想說，控件的默認（Windows 2000）外觀更容易實現瀏覽器供應商。瀏覽器必須自己繪製所有內容，包括任何控件。它們在默認樣式中看起來很原始，但對用戶來說只是一點點方便，但是沒有像WPF那樣真正喜歡（和重量級）的東西，它很快就會很難用正確繪製操作系統的OS 和 CSS的視覺樣式來控制。

確切的樣式也依賴於操作系統，因此一個給你一個外觀的解決方案可能不是你的網站大多數訪問者想要的東西。然後，再次使用CSS，您可以實現The One Look™。如果這恰好看起來像在特定操作系統上的本機一樣，那麼，就這樣吧:-)

您正在尋找的東西可能會通過使用淺灰色邊框和懸停來模擬/聚焦淺藍色，仿效Vista和Windows 7的Aero外觀。

來源

2009-05-18 22:57:31 Joey

簡短回答：沒有。

瀏覽器和表單控件無疑是CSS中最不一致的部分。我所能建議的只是在輸入字段上使用1px邊框，因爲大多數瀏覽器都使用類似的東西。 CSS3圓角也應該在少數瀏覽器中運行。

input.text { 
    border: 1px solid #ccc; 
    background-color: #fcc; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
}

你會發現this page at 456 Berea Street有趣。它展示了每個瀏覽器如何在文本框上應用不同的樣式。

來源

2009-05-18 23:13:24 DisgruntledGoat

對不起 - 任何類型的輸入元素樣式往往會破壞他們的操作系統/瀏覽器默認值。默認輸入以完全不同的方式呈現 - 不幸的是，它們不像編碼到瀏覽器中那樣是CSS樣式。

這裏要做的最好的事情是，而不是試圖讓你的紅色背景輸入模擬正常的輸入，創建你自己的有吸引力的造型！如果您喜歡這些明亮的邊框，請使用border: 1px #ccc solid。如果你喜歡圓角，可以利用border-radius和-moz-border-radius - 對於那些處於瀏覽器開發邊緣的人來說，他們會有的。對於那些不是，他們不會注意到這種差異。

簡而言之，不要試圖使輸入適合OS環境，而應該將它們設計爲您自己網站的外觀和風格。這將爲您的網站創建更好的設計:)

來源

2009-05-18 23:32:04 Matchu

輸入背景色破壞造型？

回答

相關問題