गोलाकार कोनों का उपयोग करके <select> आइटम पर अतिरिक्त क्रोम सीमा

Question

मुझे क्रोम में कोई समस्या है जहां "दो" सीमाएं हैं जब मैं एक चुनिंदा मेन्यूबॉक्स पर गोलाकार कोनों का उपयोग करता हूं (नीचे देखें, शीर्ष एक इनपुट बॉक्स है और नीचे चयन है बॉक्स)

input, select { 
    border:2px solid #ced6e9; 
    -moz-border-radius:8px; 
    border-radius: 8px; 
} 

मैं दो अन्य तरीकों की कोशिश की है, लेकिन वे काम नहीं करते:

1. Rounded corners in Chrome not working काम नहीं करता है और

2. -webkit-appearance: none; की स्थापना, लेकिन यह दर्शाता है कि उसे क्रोम v18 के साथ एक का चयन करें बॉक्स

संपादित मैं विंडोज 7 का उपयोग कर रहा (सर्विस पैक 1) है थोड़ा बटन को निकाल

लटकती के लिए कोई नहीं करने के लिए इस jsFiddle example

Answer 1

इस समस्या से पहले और मैंने जो कुछ किया वह चयन पर सीमा को हटा दिया गया था और इसे उसी शैली (गोलाकार सीमाओं) के साथ एक div में लपेटा गया था। मुझे यकीन है कि एक और अधिक सुरुचिपूर्ण समाधान है लेकिन समाधान के लिए घंटों/दिनों की खोज करने से बेहतर था।

यह fiddle देखें।

Answer 2

सेट सीएसएस रूपरेखा संपत्ति देखें ...

+०१२३५१६४१०

select:focus 
{ 
    outline: none; 
} 

Answer 3

आप किस संस्करण का उपयोग कर रहे हैं? कभी-कभी ओएस कुछ एचटीएमएल तत्वों पर अतिरिक्त ग्राफिकल क्विर्क को मजबूर करेगा। एरो थीम सक्षम के साथ विंडोज 7 पर क्रोम 18 में वांछित व्यवहार के रूप में व्यवहार करना प्रतीत होता है। मैंने वास्तव में -webkit-appearance: none: https://stackoverflow.com/a/10074928/1030243 से खोए गए आलेखीय तत्वों को प्रतिस्थापित करने के लिए select तत्व स्टाइल करने के लिए उदाहरण के साथ एक समान प्रश्न का उत्तर दिया। उम्मीद है कि अगर कोई अन्य समाधान नहीं मिला है, तो आप इसे सीएसएस की कुछ अतिरिक्त लाइनों के साथ कार्यान्वित कर सकते हैं।

Answer 4

मैं मार्जिन के बजाय एक गद्दी का उपयोग कर recomand ... यह

select {   
    -moz-border-radius:8px; 
    border-radius: 8px; 
    -webkit-border-radius: 5px; /*this one is more important than the moz one*/ 
    padding:9px; 
}