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

如何重置或更改電子郵件輸入元素的默認樣式？如何刪除HTML 5表單元素的默認樣式？

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; 
}

是你在找什麼：

來源

2015-06-03 Rohit Kumar

爲我們提供更多的代碼，並請明確。 – Newinjava

這個問題並沒有問你描述爲什麼你的實際需求... – meskobalazs

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

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

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

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

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

來源

2015-06-03 10:55:02 SW4

是的我一直在尋找像你說的關於僞元素 - ：無效的東西。我想知道它的瀏覽器支持..是否支持主流瀏覽器？ –

-1

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

來源

2015-06-03 10:53:26 Aitor

我認爲你必須在驗證要處理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

來源

2015-06-03 10:55:37

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

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

來源

2015-06-03 10:58:55

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

回答

相關問題