क्या एक इनपुट पारदर्शी बनाने के लिए एक शुद्ध सीएसएस तरीका है?

Question

मैं इस इनपुट को पारदर्शी कैसे बना सकता हूं?

<input type="text" class="foo"> 

मैंने कोशिश की है लेकिन यह काम नहीं करता है।

background:transparent url(../img/transpSmall.png) repeat scroll 0 0; 

Answer 1

input[type="text"] 
{ 
    background: transparent; 
    border: none; 
} 

कोई भी यह नहीं है पता चल जाएगा।

Answer 2

मैं none को outline गुण को सेट इस

input[type="text"] 
{ 
    background: rgba(0, 0, 0, 0); 
    border: none; 
    outline: none; 
} 

करना पसंद बॉक्स पर प्रकाश डाला जब कर्सर में प्रवेश करती है

Answer 3

से ब्राउज़र बंद हो जाता है दो तरीकों पहले बताए आज पर्याप्त नहीं हैं। मैं personnally का उपयोग करें:

input[type="text"]{ 
    background-color: transparent; 
    border: 0px; 
    outline: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    width:5px; 
    color:transparent; 
    cursor:default; 
} 

यह भी छाया कुछ ब्राउज़रों पर सेट निकाल देता है, पाठ कि इनपुट हो सकता है और कर्सर व्यवहार कर के रूप में यदि इनपुट वहाँ नहीं था सकता है छिपाना।

आप चौड़ाई 0px भी सेट करना चाहते हैं।

Answer 4

मैंने अस्पष्टता 0 पर सेट की है। यह गायब हो गया है लेकिन जब भी आप उस पर क्लिक करते हैं तब भी कार्य करता है।

Answer 5

एक सामान्य नियम के रूप में, आपको कभी भी outline या :focus शैली को पूरी तरह से हटा नहीं देना चाहिए।

https://a11yproject.com/posts/never-remove-css-outlines

... का उपयोग कर outline: none उचित फ़ॉलबैक के बिना अपनी साइट काफी कम किसी भी कुंजीपटल केवल उपयोगकर्ता, न केवल कम दृष्टि वाले लोगों के लिए सुलभ बना देता। हमेशा अपने इंटरैक्टिव तत्वों को फोकस का एक दृश्य संकेत देना सुनिश्चित करें।