如何刪除HTML 5表單元素的默認樣式？

Question

如何重置或更改電子郵件輸入元素的默認樣式？

input 
 
{ 
 
    width: 100%; 
 
}

<input type="text" placeholder="text box" /><br /><br /> 
 
<input type="email" placeholder="email box with default styling when invalid email is entered" />

我想email元素的驗證，以保持原樣。只是在輸入錯誤的電子郵件時想更改紅色邊框。

input[type="email"].error { 
    border-color: red; 
} 

是你在找什麼：

Answer 1

它不是特別清楚，你所追求的，但是請注意，你可以風格HTML5的無效狀態（您必須使用兼容的瀏覽器）使用:invalid僞輸入字段。

input:invalid { 
 
    border: 1px solid red; 
 
} 
 
:focus { 
 
    outline: none; 
 
}

<input type="number" placeholder="enter some letters.." />

然而，如果你指的是除去默認的輸入風格，你將不得不覆蓋用戶代理樣式表的默認值，或者根據討論使用的樣式（的推導）appearance:none

外觀屬性定義元素如何（特別是形成 對照）默認顯示。

Answer 2

當它是錯的，比如你可以添加一個「類」到電子郵件輸入？

Answer 3

我認爲你必須在驗證要處理HTML5的內置在驗證行爲

var email = document.querySelector('input[type="email"]'); 
email.oninvalid = function(e) { 
e.target.setCustomValidity(""); 
if (!e.target.validity.valid) { 
    email.style.borderColor="red"; 
    e.target.setCustomValidity("Please enter a valid eMail address"); } 
}; 

Fiddle

Answer 4

似乎檢查。這似乎是你正在尋找的，pseudoclasses像：無效。更多的信息在這裏：http://html5doctor.com/css3-pseudo-classes-and-html5-forms/

該解決方案不會是所有的跨瀏覽器。我建議使用js進行客戶端驗證，如jquery validate：http://jqueryvalidation.org/