2011-07-06 7 views
15

पर वेबकिट के सीएसएस रूपरेखा मैं फ़ॉर्म फील्ड पर डिफ़ॉल्ट सीएसएस outline सेटिंग पुनर्स्थापित करना चाहते हैं, लेकिन मैं यह डिफ़ॉल्ट वेबकिट या ब्राउज़र विशिष्ट शैली के लिए बहाल करना चाहते हैं।पुनर्स्थापित इनपुट क्षेत्र

पेज मैं साथ outline: none सभी तत्वों पर आवेदन किया है काम कर रहा हूँ, और मैं बस कुछ ही लोगों पर डिफ़ॉल्ट सेटिंग को वापस करना चाहते। कोई विचार?

उत्तर

22
इसके बजाय रूपरेखा के साथ रीसेट करने का

: कोई नहीं, रूपरेखा-चौड़ाई के साथ रीसेट: 0. यह शैलियों समाशोधन से ब्राउज़र को रोकता है और जब आप एक चौड़ाई पुन: लागू शैली अभी भी वहाँ हो जाएगा।

input:focus { 
    outline-width: 0; 
} 

input.nostyle:focus { 
    outline-width: 5px; 
} 

http://jsfiddle.net/VT4Hb/

+1

हालांकि यह वास्तविक उत्तर नहीं है, यह एक बहुत अच्छा समाधान है जो काम करता है। धन्यवाद! –

3

उपयोग खेतों आप एक रूपरेखा के बिना चाहते हैं पर एक वर्ग।

.nool { outline: none; } 
+2

OneOfOne सही है। सीएसएस आपको शैलियों को "पूर्ववत" करने की अनुमति नहीं देता है। यदि आप कर सकते हैं, तो जो भी सीएसएस नियम प्रत्येक तत्व के लिए "रूपरेखा: कोई नहीं" लागू कर रहा है और विशेष रूप से लक्षित करने के लिए कक्षा का उपयोग करें, जिसमें किस तत्व तत्वों की रूपरेखा नहीं होनी चाहिए। – jbarreiros

+1

@jbarreiros: भले ही यह काम करता है, यह कक्षाओं को सब कुछ पर रखने के लिए एक सुरुचिपूर्ण या अर्थपूर्ण समाधान नहीं है। डुओपिक्सेल का समाधान शुद्ध सीएसएस का उपयोग करके इसे पूरा करता है। – Wylie

37

अपने वास्तविक प्रश्न (straight from WebKit's default html.css styles) का जवाब यह है:

:focus { 
    outline: auto 5px -webkit-focus-ring-color; 
} 

-webkit-focus-ring-color का मूल्य एक मंच अलग पर निर्धारित किया जाता है (यदि आप सुपर उत्सुक हैं, तो आप WebCore::systemFocusRingColor के लिए देख सकते हैं)। अभ्यास में, मूल्य प्लेटफ़ॉर्म द्वारा भिन्न होते हैं।

सफारी v6 और पर ओएस एक्स शेर क्रोम v20 में, वास्तविक मूल्य है:

outline: rgb(94, 158, 215) auto 5px; 

... और लिनक्स पर विंडोज और क्रोमियम v18 पर क्रोम v20 में, मूल्य मुझे मिल गया था:

outline: rgb(229, 151, 0) auto 5px; 

रूप this great StackOverflow answerrun this jsFiddle to calculate the outline colour on your own machine, आप कर सकते हैं में वर्णित।

+0

यह चयनित उत्तर होना चाहिए, हालांकि डुओपिक्सेल कुछ अच्छी अंतर्दृष्टि प्रदान करता है। – ooolala

संबंधित मुद्दे