वेबकिट ब्राउज़र में स्टाइलिंग इनपुट प्रकार रेंज तत्व

Question

क्या वेबकिट ब्राउज़र के लिए <input type="range"> तत्वों को स्टाइल करने का कोई तरीका है?

Answer 1

मैंने केवल range के प्रकार के बारे में सुना है, slider नहीं।

input[type="range"] { 
    -webkit-appearance: slider-horizontal; 
} 

Answer 2

styling a range to make it look like an iPhone slider पर एक बहुत अच्छा लेख डेविड बी Calhoun द्वारा लिखित है।

मुझे लगता है कि ब्लॉग पोस्ट में एक रेंज इनपुट प्रकार स्टाइलिंग के अधिकांश पहलुओं को शामिल करना चाहिए।

यहाँ सीएसएस के कुछ है:

input[type='range']::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 68px; 
    height: 44px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     color-stop(0, #fefefe), 
     color-stop(0.49, #dddddd), 
     color-stop(0.51, #d1d1d1), 
     color-stop(1, #a1a1a1) 
    ); 
    background-repeat: no-repeat; 
    background-position: 50%; 
}