http://codepen.io/anon/pen/KwKOazबटन के 'पृष्ठभूमि-रंग' को बदलने से अन्य शैलियों को भी बदलता है?
बदलने से केवल background-color काफी एक बटन तत्व की शैली, विशेष रूप से border शैली बदल जाता है।
यह क्रोम, सफारी पर होता है, और Firefox पर एक मैक। ऐसा क्यों होता है? मैं अपने पृष्ठभूमि रंग को सुरक्षित रूप से कैसे बदल सकता हूं?
ब्राउज़र विक्रेता बटन और इनपुट फ़ील्ड जैसे यूआई तत्वों के लिए कस्टम स्टाइल लागू करते हैं। इन ओवरराइट किए गए विशेषताओं में से किसी एक को बदलने से परिणामस्वरूप उस तत्व पर अन्य सभी विक्रेता शैलियों को अक्षम किया जा सकता है। यदि आप एक विशेषता को बदलना चाहते हैं, तो आपको दूसरों को भी बदलना होगा, मुझे डर है।
दुर्भाग्यवश मैं आपको यह नहीं बता सकता कि वे ऐसा क्यों करते हैं - शायद कुछ spec पीछे हो सकता है, लेकिन मुझे इसके लिए कोई सबूत नहीं मिल रहा है।
जब सभी शैलियों को छूटा नहीं जाता है, तो ब्राउजर दिए गए नियंत्रण को प्रस्तुत करने के लिए होस्ट ओएस के दिए गए एपीआई का उपयोग करता है। यह नियंत्रण को प्लेटफॉर्म पर मूल रूप से देखेगा, लेकिन यदि आप उस नियंत्रण/तत्व पर किसी भी शैली को लागू करते हैं, तो ब्राउज़र गारंटी नहीं दे सकता कि दी गई शैली को दिए गए प्लेटफ़ॉर्म में लागू किया जा सकता है, इसलिए यह एक सरलीकृत, पूरी तरह से सीएसएस समाधान पर वापस आ जाता है ।
यह भी ध्यान दें कि स्टाइल नियंत्रण तत्व, हालांकि काम करता है, स्थिर मानकों द्वारा अभी तक कवर नहीं किया गया है।
उदाहरण के लिए, एनएसबटन (ओएस एक्स में बटन के पीछे मूल नियंत्रण) में पृष्ठभूमि रंग सेट करने का विकल्प नहीं है, इसलिए ब्राउजर को असंभव कार्य का सामना करना पड़ता है। विंडोज़ पर, आप पृष्ठभूमि रंग बदल सकते हैं, यही कारण है कि लोग विंडोज़ पर आपकी समस्या नहीं देख रहे हैं।
कभी-कभी सीएसएस शैलियों को विरासत में मिलाया जाता है। हालांकि, आप अपने शरीर को शैलियों को लागू कर रहे हैं जो HTML में सबकुछ है। निजी तौर पर मैं सीएसएस को रीसेट या सामान्य करने के अलावा शरीर को कुछ भी लागू नहीं करता हूं। जैसा कि कहा गया है, तो आप कम करने के लिए CSS चयनकर्ता ऑपरेटरों और \ या आईडी/वर्गों का उपयोग कर सकते हैं:
http://www.w3schools.com/cssref/css_selectors.asp
उदाहरण:
एचटीएमएल
btw सिर्फ पढ़ने में आसान इस तरह एचटीएमएल नहीं लिखते
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
सीएसएस
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
हुह? सवाल से संबंधित कैसे है? – Christoph
विंडोज 7 पर इस व्यवहार को नहीं देख रहा है, क्रोम ... बटन पृष्ठभूमि रंग को छोड़कर समान दिखते हैं, जैसा कि आप उम्मीद करेंगे। क्या आपने 'पृष्ठभूमि-रंग' के स्थान पर 'पृष्ठभूमि' का उपयोग करने का प्रयास किया है? – Scott
हां, मैंने कोशिश की है। – fent
उबंटू – aw04