WebKit Browsers में स्वतः पूर्ण शैलियाँ बदलें सीएसएस-ट्रिक्स

हमें Lydia Dugger की एक अच्छी टिप मिली जो कि उन शैलियों को बदलने के लिए एक विधि के साथ ईमेल के माध्यम से है जो WebKit ब्राउज़र उन क्षेत्रों को बनाने के लिए लागू होते हैं जिन्हें स्वत: पूर्ण किया गया है।

हम स्वसंचालित होने का क्या मतलब है

कई ब्राउज़र (क्रोम और सफारी सहित) एक ऐसी सेटिंग प्रदान करते हैं जो उपयोगकर्ताओं को सामान्य फ़ॉर्म फ़ील्ड के लिए स्वचालित रूप से विवरण भरने की अनुमति देता है। आपने एक फ़ॉर्म को पूरा करते समय इसे देखा है जो नाम, पता और ईमेल जैसी चीज़ों के लिए पूछता है।

पकड़ यह है कि इस स्निपेट को प्रभावी बनाने के लिए उपयोगकर्ताओं ने इस सेटिंग को सक्षम किया होगा। यदि सेटिंग सक्षम है, तो WebKit ब्राउज़र उन फ़ील्ड्स को शैली देगा, जिनके पास उपयोगकर्ता के लिए स्वत: पूर्ण है, जैसे:

ध्यान दें कि स्वत: पूर्ण फ़ील्ड में पीले रंग की पृष्ठभूमि कैसे होती है? इसी बात को हम इस स्निपेट के साथ बदलने जा रहे हैं।

स्निपेट

हम -webkit-autofillउन क्षेत्रों को लक्षित करने के लिए छद्म चयनकर्ता का उपयोग कर सकते हैं और जैसा कि हम फिट देखते हैं, उन्हें स्टाइल करते हैं। डिफ़ॉल्ट स्टाइलिंग केवल पृष्ठभूमि रंग को प्रभावित करती है, लेकिन अधिकांश अन्य गुण यहां लागू होते हैं, जैसे borderऔर font-size। हम -webkit-text-fill-colorनीचे दिए गए स्निपेट में शामिल पाठ का रंग भी बदल सकते हैं।

/* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus ( border: 1px solid green; -webkit-text-fill-color: green; -webkit-box-shadow: 0 0 0px 1000px #000 inset; transition: background-color 5000s ease-in-out 0s; )