निर्दिष्ट तत्व के लिए वेबकिट स्क्रॉलबार शैली लागू करें

Question

मैं दोहरे कोलन से पहले छद्म-तत्वों के लिए नया हूं। मैं कुछ वेबकिट केवल सीएसएस का उपयोग करके स्क्रॉलबार की स्टाइलिंग पर चर्चा करने वाले ब्लॉग लेख में आया था। क्या छद्म-तत्व सीएसएस व्यक्तिगत तत्वों पर लागू किया जा सकता है?

/* This works by applying style to all scroll bars in window */ 
::-webkit-scrollbar { 
    width: 12px; 
} 

/* This does not apply the scrollbar to anything */ 
div ::-webkit-scrollbar { 
    width: 12px; 
} 

इस बेला में, मैं div के स्क्रॉलबार अनुकूलित करना चाहते हैं, लेकिन डिफ़ॉल्ट पर मुख्य विंडो के स्क्रॉलबार मनाने।

http://jsfiddle.net/mrtsherman/4xMUB/1/

Answer 1

आपका विचार सही था। हालांकि, div के बाद एक स्थान के साथ div ::-webkit-scrollbar नोटेशन वास्तव में div *::-webkit-scrollbar जैसा ही है; इस चयनकर्ता का अर्थ है "<div> के अंदर किसी भी तत्व की स्क्रॉलबार"। div::-webkit-scrollbar का प्रयोग करें।

डेमो देखें http://jsfiddle.net/4xMUB/2/

Answer 2

पर मैं एक कस्टम स्क्रॉलबार प्रयोग करने के लिए एक वर्ग का भी उपयोग कर करना चाहते हैं।

किसी भी तरह .foo::-webkit काम नहीं करता है, लेकिन मुझे लगता है कि div.foo::-webkit काम करता है! उन ## $$ * ## छद्म बातें ....

देखें http://jsfiddle.net/QcqBM/16/

Answer 3

तुम भी तत्व की आईडी से इन नियमों को लागू कर सकते। आइए मान लें कि एक div के स्क्रॉल बार को स्टाइल किया जाना चाहिए जिसमें एक आईडी "myDivId" है। फिर आप निम्नलिखित कर सकते हैं। इस तरह आप विभिन्न तत्वों के स्क्रॉल बार के लिए विभिन्न शैलियों का उपयोग कर सकते हैं।

#myDivId::-webkit-scrollbar { 
    width: 12px; 
} 

#myDivId::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

#myDivId::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

http://jsfiddle.net/QcqBM/516/