HTML5 onaylaması için varsayılan kırmızı kenarlığı FireFox/Internet Explorer 11'de kaldırın.

Question

HTML5 onaylı forma özel stil sağlamayı deniyorum. İletileri geçersiz kılmayı başardım ve formu değiştirdim, ancak IE11'deki geçersiz öğelerin etrafında kırmızı kenarlıktan kurtulmayı başaramıyorum.

Chrome istediğim gibi davranıyor, sınırsız, ancak IE11 ve Firefox, alanın etrafındaki kırmızı rengi gösteriyor. Aşağıdaki ekleyerek denedim

:

input:required {...} 
input:valid {...} 
input:invalid {...} 

Ama başarılı olamadı - Sadece/geçersiz kılmaz, ek kenarlık eklemek orijinal birini kaldırabilir. Farklı bir operasyon moduna sahip olduklarını da görebiliyorum - kurtulmaya çalıştığım kırmızı sınır, yalnızca gönder düğmesine bastıktan sonra IE'de uygulanıyor. Form sadece kireç kenarlığı ile başlar, sadece gönder tuşuna bastığımda kırmızı kenarlık da eklenir. Doğru verileri koymak, her iki sınırı da anında kaldırır (IE11'de budur). Öte yandan Firefox, uygulanan kırmızı ve kireç sınırları ile başlar.

için tam bir örnek: http://jsfiddle.net/zbyzhbdm/5/

/kırmızı sınır kaldırmak farklı renkle ayarlamak için herhangi bir yolu var mı? Kendi doğrulama komutuma başvurmadan yerel HTML5 doğrulamasını kullanmak isterim.

Güncelleme: Firefox aşağıdaki geçersiz kılma ile sınırını kaldırmak için ikna edilebilir:

input:invalid { 
    box-shadow: none !important; 
} 

(http://jsfiddle.net/zbyzhbdm/7/ tam detaylar)

IE hala gidip anlamaya.

Answer 1

border yerine outline css özelliğini deneyin.