क्रोम में नीली फोकस रूपरेखा की डिफ़ॉल्ट शैली क्या है?

Question

मेरे पास एक वेबपैप है जो सामग्री के योग्य div का उपयोग करता है। मुझे पसंद है कि वे क्रोम में कैसे दिखाई देते हैं: जब मैं ध्यान केंद्रित करता हूं, क्रोम div के चारों ओर एक अच्छी नीली चमक प्रदर्शित करता है। हालांकि फ़ायरफ़ॉक्स में मुझे एक बदसूरत डैश वाली रूपरेखा मिलती है। मैंने जो देखा है वह यह है कि जब मैं div की रूपरेखा बदलता हूं तो क्रोम अपना डिफ़ॉल्ट नीला फ्रेम प्रदर्शित करता है: फोकस। मैं अपना ऐप लगातार अच्छा दिखाना चाहता हूं, इसलिए मेरा प्रश्न

मैं div[contenteditable="true"]:focus के लिए क्रोम की डिफ़ॉल्ट शैली को दोहरा सकता हूं?

Answer 1

सवाल का जवाब करने के लिए, वेबकिट ब्राउज़रों outline: 5px auto -webkit-focus-ring-color; का उपयोग करें। मैक -webkit-focus-ring-color नीला rgb(94, 158, 214) (या #5E9ED6) है, लेकिन विंडोज और लिनक्स पर यह सोने rgb(229, 151, 0) (या #E59700) (ref) है।

जब मैं स्थिरता के लिए अपनी इच्छा को समझते हैं, उन आम तौर पर केवल एक ही ब्राउज़र का उपयोग, और उनके ब्राउज़र की डिफ़ॉल्ट शैलियों के लिए उपयोग किया जाता है। ध्यान दें कि जब तक आप :focus के प्रत्येक उदाहरण को बदलने की योजना नहीं बनाते हैं, तो आप उदासीनता के साथ समाप्त हो जाएंगे। कीबोर्ड उपयोगकर्ता। पेशेवरों और विपक्ष आह!

आप outline शैलियों को परिभाषित करने और 'वापस लाएं' वापस :focus पर डिफ़ॉल्ट उपयोगकर्ता एजेंट शैलियों को चाहते हैं, इस में मदद मिलेगी

.myClass:focus { 
 
    outline: 1px dotted #212121; 
 
    outline: 5px auto -webkit-focus-ring-color; 
 
}

-webkit -prefix रंग का मतलब है एफएफ, आईई और एज दूसरे नियम को अनदेखा कर देगा और पहले का उपयोग करेगा। क्रोम, सफारी और ओपेरा दूसरे नियम का उपयोग करेंगे।

एचटीएच! DevTools में, बल:

Answer 2

यह fiddle एक अच्छा सन्निकटन देता है, तुम क्या आप यद्यपि के बाद विशेष रूप से कर रहे हैं के साथ नज़दीकी बढ़ाने tweak कर सकते हैं।

एचटीएमएल

<div contenteditable='true'>Edit Me</div> 

सीएसएस

div[contenteditable=true] { 
    width:200px; 
    border:2px solid #dadada; 
    border-radius:7px; 
    font-size:20px; 
    padding:5px; 
    margin:10px;  
} 

div[contenteditable=true]:focus { 
    outline:none; 
    border-color:#9ecaed; 
    box-shadow:0 0 10px #9ecaed; 
}