वेबकिट सीएसएस इनपुट में रंग के चारों ओर बॉक्स को नियंत्रित करने के लिए [type = color]?

Question

क्या कोई वेबकिट-विशिष्ट सीएसएस शैली है जो मुझे input[type=color] में रंग के आस-पास के बॉक्स के रंग/आकार/शैली को नियंत्रित करने की अनुमति देगी? मैं इनपुट के रंग और पृष्ठभूमि रंग को पहले से ही सेट कर रहा हूं, इसलिए यह क्रॉस-संगतता पॉलीफिल के साथ अच्छा दिखता है जिसका उपयोग मैं पुराने क्रोम और फ़ायरफ़ॉक्स के लिए कर रहा हूं। लेकिन अब जब क्रोम में वास्तव में रंगीन पिकर होता है, तो रंग के चारों ओर एक बॉक्स होता है जो इनपुट के बीच में तैरने वाला 1px ग्रे बॉक्स छोड़ देता है जब इनपुट के रंग और पृष्ठभूमि रंग दोनों रंग एक ही रंग पर सेट होते हैं। क्या इससे छुटकारा पाने के लिए कुछ सीएसएस है, या तो उस बॉक्स की चौड़ाई को 0 पर सेट करके, शैली को none पर बदलकर, या सबसे खराब, रंग को रंग और पृष्ठभूमि रंग के समान सेट करना?

इस छवि में, मैं ग्रे बॉक्स के बारे में बात कर रहा हूँ सफेद के अंदर और बाहर हरे रंग:

मैं एक वैकल्पिक हल मिल गया है, जो एक उच्च पर्याप्त अतिरिक्त जगह स्थापित करने के लिए है कि बॉक्स (ग्रे सीमा और हरी सामग्री) आकार 0 के लिए squished है। लेकिन यह वास्तव में हैकी है, और फ़ायरफ़ॉक्स में बहुत अच्छा नहीं लग रहा है।

Answer 1

वेबकिट में special CSS selectors है जो आप फॉर्म नियंत्रण को अनुकूलित करने के लिए उपयोग कर सकते हैं लेकिन वे आधिकारिक नहीं हैं।
भविष्य में वेबकिट के लिए एक अपडेट शायद इसे तोड़ देगा।

कृपया इसे उत्पादन के लिए उपयोग न करें !!

लेकिन निजी परियोजनाओं :)

विधि 1

के लिए इसके साथ खेलने के लिए स्वतंत्र लग रहा है वेबकिट विशिष्ट चयनकर्ताओं का उपयोग करता है ज्यादातर इनपुट के गैर रंगीन हिस्सा छिपाने के लिए।

input[type="color"] { 
 
\t -webkit-appearance: none; 
 
\t border: none; 
 
\t width: 32px; 
 
\t height: 32px; 
 
} 
 
input[type="color"]::-webkit-color-swatch-wrapper { 
 
\t padding: 0; 
 
} 
 
input[type="color"]::-webkit-color-swatch { 
 
\t border: none; 
 
}

<input type=color value="#ff0000">

विधि 2

रंग इनपुट (opacity:0) छिपा देता है और इनपुट के मूल्य को आवरण की पृष्ठभूमि सेट करने के लिए जावास्क्रिप्ट का उपयोग करता।

var color_picker = document.getElementById("color-picker"); 
 
var color_picker_wrapper = document.getElementById("color-picker-wrapper"); 
 
color_picker.onchange = function() { 
 
\t color_picker_wrapper.style.backgroundColor = color_picker.value;  
 
} 
 
color_picker_wrapper.style.backgroundColor = color_picker.value;

input[type="color"] { 
 
\t opacity: 0; 
 
\t display: block; 
 
\t width: 32px; 
 
\t height: 32px; 
 
\t border: none; 
 
} 
 
#color-picker-wrapper { 
 
\t float: left; 
 
}

<div id="color-picker-wrapper"> 
 
\t <input type="color" value="#ff0000" id="color-picker"> 
 
</div>

Answer 2

एक अच्छा समाधान नहीं है करने के लिए:

एक लेबल में 1.wrap अपने रंग पिकर। 2. रंग पिकर की दृश्यता को गलत पर सेट करें। 3. लेबल पिकर के मूल्य पर लेबल के पृष्ठभूमि रंग को बाध्य करें।

JSFiddle

<label id="test_wrapper"><input id="inp" type="color"></label> 

Answer 3

दुर्भाग्य से, रंग आदानों काफी नकचढ़ा हैं:

अब, आप एक शैली के लिए आसान लेबल जो क्लिक करने के लिए, अपने रंग पिकर खुल जाता है। विभिन्न ब्राउज़र अलग-अलग व्यवहार करते हैं। उदाहरण के लिए, क्रोम width/height + border-width पर आधारित इनपुट का आकार देगा।दूसरी तरफ फ़ायरफ़ॉक्स अधिकतम width/height और border-width का उपयोग करेगा। यह <input type=color> के साथ स्वयं को समान दूरी को बराबर बनाता है।

हालांकि, हम क्या उठाए गए रंग को छोड़कर सबकुछ हटा सकते हैं, और इसके चारों ओर एक रैपर फेंक सकते हैं जो अधिक अनुमानित रूप से इनपुट के आस-पास की दूरी को संभालने में सक्षम होंगे।

label.color-picker { 
 
    width: 150px; /* Width of color picker */ 
 
    border: 1px solid #ccc; /* Outer border */ 
 
    border-radius: 3px; /* Border radius of outer border */ 
 
    padding: 5px; /* Space between outer border and color picker */ 
 
    background: #fff; /* Color between outer border and color picker */ 
 

 
    display: block; /* Contain color picker within label */ 
 
} 
 

 
label.color-picker > span { 
 
    border: 1px solid #ccc; /* Border around color in color picker */ 
 

 
    display: block; /* Contain color picker within span */ 
 
} 
 

 
label.color-picker > span > input[type=color] { 
 
    height: 10px; /* Height of color picker */ 
 

 
    display: block; /* Avoids space above/below color picker */ 
 
    width: 100%; /* Fill available horizontal space */ 
 
    border: none; /* Remove browser's border */ 
 
    padding: 0px; /* Remove space around color picker in Chrome */ 
 
} 
 

 
/* Chrome styles */ 
 
label.color-picker > span > input[type=color]::-webkit-color-swatch-wrapper { 
 
    padding: 0; /* Remove browser's padding around color picker */ 
 
} 
 
label.color-picker > span > input[type=color]::-webkit-color-swatch { 
 
    border: none; /* Remove browser's border around color in color picker */ 
 
} 
 

 
/* Firefox styles */ 
 
label.color-picker > span > input[type=color]::-moz-color-swatch { 
 
    border: none; /* Remove browser's border around color in color picker */ 
 
} 
 
label.color-picker > span > input[type=color]::-moz-focus-inner { 
 
    border: none; /* Remove browser's padding around color in color picker */ 
 
    padding: 0; /* Remove browser's padding around color in color picker */ 
 
}

<label class="color-picker"> 
 
    <span> 
 
     <input type=color value="#ff00ff"> 
 
    </span> 
 
</label>

Answer 4

मैं एक सरल समाधान का उपयोग कर रहा है, लेकिन ऐसा नहीं सुरुचिपूर्ण, मुझे लगता है। आप इनपुट को एक div के साथ लपेट सकते हैं और इनपुट को कंटेनर से बड़ा बना सकते हैं, उसके बाद आप कंटेनर को अपनी इच्छानुसार आकार दे सकते हैं। आप कुछ पाठ के साथ एक क्लिक करने योग्य बटन बनाने के लिए विशेषता के साथ एक लेबल का भी उपयोग कर सकते हैं।

मैं एक उदाहरण बना दिया है:

.input-color-container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 40px; 
 
    height: 40px; 
 
    border: solid 2px #ddd; 
 
    border-radius: 40px; 
 
} 
 

 
.input-color { 
 
    position: absolute; 
 
    right: -8px; 
 
    top: -8px; 
 
    width: 56px; 
 
    height: 56px; 
 
    border: none; 
 
} 
 

 
.input-color-label { 
 
    cursor: pointer; 
 
    text-decoration: underline; 
 
    color: #3498db; 
 
}

<div class="input-color-container"> 
 
    <input id="input-color" value="#ed6868" class="input-color" type="color"> 
 
</div> 
 
<label class="input-color-label" for="input-color"> 
 
    I am a clickable label, try me 
 
</label>

Answer 5

मेरे विधि:

<div class="user__colors"> 
    <label><input type="color"/></label> 
</div> 

input { 
    background-color: transparent; 
    border: none; 
    position: relative; 
    width: 80px; 
    height: 12px; 
    &:after { 
     position: absolute; 
     content: ''; 
     display: block; 
     width: 100%; 
     height: 100%; 
     background: url(../img/color-palette.jpg) repeat-y 0 0; 
     background-size: contain; 
     top: 0; 
     border-radius: 3px; 
    } 
} 

और यह इस तरह देखने: http://prntscr.com/gloozc

लेकिन अगर आप सीटीएल प्रेस + एफ 5, आप करेंगे एक पल के लिए मूल इनपुट देखें।