अन्य ब्राउज़रों में क्षेत्र चमक उत्पन्न करने के लिए समतुल्य?

Question

मैं लंबे समय तक केंद्रित क्षेत्रों में एक चमक जोड़ने के लिए इसका उपयोग कर रहा था, मैंने पहली बार फ़ायरफ़ॉक्स से अपने पेज तक पहुंचा और महसूस किया कि यह उस पर काम नहीं करता है, और संभवतः एक्सप्लोरर पर नहीं।

border: 1px solid #E68D29; 
outline-color: -webkit-focus-ring-color; 
outline-offset: -2px; 
outline-style: auto; 
outline-width: 5px; 

मैंने प्रतिलिपि इसे किसी अन्य पृष्ठ से चिपकाया था, इसलिए मुझे पूरा यकीन नहीं है कि यह कैसे काम करता है। फ़ायरफ़ॉक्स या एक्सप्लोरर के बराबर क्या है? मेरा मतलब है कि मैं अन्य ब्राउज़रों में एक समान चमक कैसे बना सकता हूं? धन्यवाद

Answer 1

वेबकिट "रूपरेखा-शैली: ऑटो;" का इलाज करता है अन्य ब्राउज़रों की तुलना में अलग है। यदि आप ऐसे व्यवहार प्राप्त करना चाहते हैं जो ब्राउज़र में अधिक समान है, तो मैं आपको इसके बजाय बॉक्स-छाया का उपयोग करने की सलाह दूंगा। यह पुराने ब्राउज़र (IE8 और इससे पहले, या FF3.0 और इससे पहले) पर लागू नहीं होगा लेकिन अन्यथा समान होना चाहिए।

का उपयोग this code

input { 
    border: 1px solid #E68D29; 
    } 
    input.focus { 
    border-color: #439ADC; 
    box-shadow: 0 0 5px #439ADC; /* IE9, Chrome 10+, FF4.0+, Opera 10.9+ */ 
    -webkit-box-shadow: 0 0 5px #439ADC; /* Saf3.0+, Chrome */ 
    -moz-box-shadow: 0 0 5px #439ADC; /* FF3.5+ */ 
    } 

मैं एक परिणाम है कि IE9+, FF4+, Chrome 10+, and Safari 5+ में क्रॉस-ब्राउज़र चमक से पता चलता उत्पादन करने में सक्षम था।

विकल्प 2) आप रूपरेखा के कुछ संयोजन (जो वेबकिट में दिखाए जाएंगे) और बॉक्स-छाया (अन्य ब्राउज़रों के लिए) का उपयोग करके प्रयोग कर सकते हैं।

विकल्प 3) आपके लिए क्रॉस-प्लेटफ़ॉर्म इनपुट स्टाइल की देखभाल करने के लिए Formalize CSS जैसी लाइब्रेरी का उपयोग करें। परिणाम बहुत प्रभावशाली हैं।