2012-07-25 18 views
6

यह सरल कोड क्रोम या सफारी में काम नहीं कर रहा में textarea के साथ काम नहीं कर रहा ...सीएसएस बॉक्स छाया वेबकिट

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
</head> 
<style> 
:required {box-shadow:0 0 5px red;} 
</style> 
<body> 
<form> 
<textarea required></textarea> 
</form> 
</body> 
</html> 

यह फ़ायरफ़ॉक्स और ओपेरा में ठीक काम करता है। इसके अलावा, border:1px solid red वेबकिट ब्राउज़र में बस ठीक काम करता है। क्या बात है? मैंने textarea {display:block;} भी कोशिश की कि यह एक इनलाइन मुद्दा हो सकता है।

+0

मुझे chrome में वेब देव उपकरण + का उपयोग कर 'required' stackoverflow जवाब पाठ क्षेत्र – Ross

उत्तर

13

आप

-webkit-appearance: none; 

भयानक वेबकिट एक साधारण ब्लॉक के रूप में पाठ क्षेत्र प्रस्तुत करना और सभी सीएसएस आप लिखते लागू मजबूर करने के लिए जोड़ने की जरूरत है।

See jsfiddle

+0

मैं आपको एक उपयोगी दूंगा, क्योंकि यह काम करता है। मुझे नहीं लगता कि यह विक्रेता-विशिष्ट कोड सबसे अच्छा विकल्प है, हालांकि। – doubleJ

+2

बात यह है कि यह विक्रेता-विशिष्ट कोड यही कारण है कि आपकी शैलियों को लागू नहीं किया जाता है। ध्यान दें कि गैर-वेबकिट ब्राउज़र इस समस्या को प्रदर्शित नहीं करते हैं। –

+0

मैं इसे उत्तर के रूप में चुन रहा हूं। सीमा ने उस विशिष्ट समस्या को हल किया जो प्रश्न के संबंध में था, लेकिन ऐसा लगता है कि समस्या, साथ ही अन्य समस्याएं (उदाहरण के लिए सीमा-त्रिज्या ') को हल करना प्रतीत होता है। – doubleJ

0

बजाय एक वर्ग या आईडी के माध्यम से Textarea का चयन :required चयनकर्ता

2

की आप पाठ क्षेत्र कोई भी (या एक पृष्ठभूमि रंग को छोड़कर किसी कारण कुछ भी घोषणा की पृष्ठभूमि घोषणा देते हैं कोशिश सफेद) छाया काम करेगा।

<style> 
:required { 
    background: none; 
    box-shadow:0 0 5px red; 
} 
</style> 
+0

यह काम करता है में जोड़ने के लिए ठीक काम करता है, लेकिन वेबकिट एक काले रंग की सीमा में शामिल नहीं करता है। – doubleJ

2

इस

textarea:required { 
    box-shadow: 0 0 5px red; 
    -webkit-box-shadow: 0 0 5px red; 
    -moz-box-shadow: 0 0 5px red; 
    border: solid 0px transparent; // or border: none; 
}​ 

DEMO. और Read this की कोशिश करो।

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