Chrome / Webkit में <select> तत्व से गोल कोनों को हटाना

Question

क्रोम के लिए उपयोगकर्ता-एजेंट स्टाइलशीट एक <select>तत्व के सभी कोनों को 5px की सीमा-त्रिज्या देता है । मैंने अपनी बाहरी स्टाइलशीट के माध्यम से 0px की त्रिज्या को लागू करके इससे छुटकारा पाने की कोशिश की है, साथ ही तत्व पर इनलाइन भी; मैं कोशिश की है दोनों border-radius:0pxऔर -webkit-border-radius:0px;और मैं और भी विशिष्ट की कोशिश की है border-top-left-radius:0px(यह -webkit बराबर के साथ)।

कोई काम नहीं कर रहे हैं।

जब मैं वेबकिट के डेवलपर टूल में तत्व की जांच करता हूं, तो कंप्यूटेड स्टाइल त्रिज्या को 5px के रूप में सूचीबद्ध करता है। लेकिन अगर मैं बारीकियों को देखने के लिए उसके बगल में विस्तारक तीर पर क्लिक करता हूं, तो यह पढ़ता है: element.style - 0px। और उसके नीचे यह बाहरी सीएसएस विनिर्देश दिखाता है जिसे मैंने 0px दिया था, साथ ही 5px के उपयोगकर्ता-एजेंट स्टाइलशीट विनिर्देश। और उन दोनों बाद के दो को पार किया जाता है, जैसा कि उन्हें होना चाहिए।

कोई विचार?

Comments

क्या आप कोड भी पोस्ट कर सकते हैं? इससे भी बेहतर अगर आप इसे jsfiddle.net का उपयोग करके पोस्ट करते हैं।

— ngen

मेरे पास वास्तव में Win7 पर Chrome 10 में डिफ़ॉल्ट शैली के रूप में कोई सीमा-त्रिज्या नहीं है, शायद यह एक और संस्करण या ओएस है?

— वेस्ले मर्च

विंडोज 7 पर क्रोम 12 में कोई गोल कोनों नहीं।

— andyb

उल्लेख किया जाना चाहिए कि यह मैक ओएस एक्स पर है

— अधिकतम 14

Answer 1

यह मेरे लिए काम करता है (पहली उपस्थिति ड्रॉपडाउन सूची नहीं):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

Comments

गोल कोनों को हटाने का कोई तरीका लेकिन तीर को दाईं ओर रखें?

— एडम

आपको तीर छवि को जोड़ने की आवश्यकता है जैसे कि पृष्ठभूमि छवि 100% 50% और नो-रिपीट विशेषता के साथ। अतिरिक्त http अनुरोधों से बचने के लिए मैंने css में base64 एन्कोडेड इमेज का भी उपयोग किया।

— कार्ल एडलर

@ अदम यह मेरे लिए काम करता है अगर आप उपयोग करते हैं border: 0और एक रूपरेखा जोड़ते हैं जैसे:outline: 1px inset black; outline-offset:-1px

— फ़िलिप परेरा

@FilipePereira नाइस मुझे अच्छा लगा, हालाँकि मुझे यह जोड़ना पड़ेगा कि आउट-ऑफ़्स IE द्वारा समर्थित नहीं है।

— टिम

यह तीर को दाईं ओर हटाता है, जो उपयोगकर्ता के अनुभव को अस्वीकार्य रूप से नुकसान पहुंचाता है। इसके बजाय, शैली लटकती background-color: #yourbgऔर border-style: noneउसके बाद सीधे साथ लटकती से पहले एक div बनाने position: absoluteऔर border-bottom: 1px solid #youpickऔर display: inline। तीर संरक्षित, यूएक्स अनारक्षित, बेहतर फिक्स।

— १६:१६ बजे

Answer 2

ड्रॉपडाउन छवि के साथ बस मेरा समाधान (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

मैं बूटस्ट्रैप का उपयोग कर रहा हूं, इसीलिए मैंने select.form-control
आपका उपयोग किया select{या select.your-custom-class{इसके बजाय आप उपयोग कर सकते हैं ।

Comments

यह एकमात्र उत्तर है जिसने मेरी समस्या को हल किया है, हालांकि पृष्ठभूमि बनाम छवि का उपयोग करने के प्रति सचेत रहें क्योंकि svg का भरण रंग आपके इनपुट के लिए आपके द्वारा निर्धारित किसी भी पृष्ठभूमि रंग को अधिलेखित कर देगा।

— लुकास एम

सहमत, कृपया इस जवाब को वोट दें! मैं अधूरे उत्तर पर अन्य मतों को नहीं समझता। इनलाइन svg के बजाय फॉन्टवॉच आइकन का उपयोग करने की कोई सलाह?

— निकोलस थेरी

FontAwesome आइकन का एक संग्रह है, लेकिन आपको केवल एक आइकन की आवश्यकता है। तो आपको icomoon.io जैसे कुछ टूल का उपयोग करके एफए आइकन में से एक को निकालने की आवश्यकता है। उस आइकन को svg या png फ़ाइल के रूप में निर्यात करने के बाद और इसे अपने css से लिंक करें

— अफ़ज़ल हुसैन

अच्छा समाधान, लेकिन मेरी स्थिति में मैंने पृष्ठभूमि-रंग जोड़ा: सफेद;

— विक्टर बोगुट्स्की 16

ध्यान दें, जब आप सेट करते हैं width: auto;, तो जोड़ा गया svg तीर चयन की सामग्री को ओवरले करता है। इसके लिए 16px के दाईं ओर एक अतिरिक्त पैडिंग की आवश्यकता होती है। यह गद्दी हालांकि सभी ब्राउज़रों पर दिखाई देती है, अन्य ब्राउज़रों पर डिज़ाइन को तोड़ती है। मेरे पास अभी तक इसके लिए कोई समाधान नहीं है ...

— कलस वैन डेर वीज

Answer 3

यदि आप वर्गाकार सीमाएँ चाहते हैं और अभी भी थोड़ा विस्तारक तीर चाहते हैं, तो मैं इसकी सलाह देता हूँ:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

Comments

इस के साथ समस्या यह है कि आप डिफ़ॉल्ट स्थान पर आ जाएगी है outlineपर :focus। यदि आप इस उत्तर का उपयोग करने जा रहे हैं, तो आपको अपनी शैली को नेत्रहीन रूप से यह दिखाने के लिए बदलना चाहिएselect:focus कि selectतत्व सक्रिय हो गया है, या :focusएड, क्लिक पर।

— डेविन मैकइनिस

@ jordan314 इस तस्वीर पर गोल कोनों को देखें । सीमा-त्रिज्या: 0; चयन टैग पर कोई प्रभाव नहीं है। वैसे भी कम से कम क्रोम OSX पर।

— जैमर

@ 7immy यह अजीब है, मैं भी क्रोम ओएस एक्स पर हूं और यहां ऊपर दिए गए फिडेल imgur.com/r6ce6Yv

— jordan314

@ jordan314 इसके बारे में कैसे? jsfiddle.net/78xa6qud/2 । मुझे लगता है कि अगर चयन की पृष्ठभूमि और उसके पीछे की पृष्ठभूमि एक ही रंग की हो तो हम इसे दूर कर सकते हैं।

— जैमर

@ 7immy आह हां, मुझे लगता है कि यह एक चेतावनी है।

— जोर्डन ३१४

Answer 4

यहाँ कुछ अच्छे समाधान हैं, लेकिन इसमें एसवीजी की जरूरत नहीं है, सीमा को संरक्षित करता है outlineऔर इसे बटन पर फ्लश करता है।

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}

<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

Answer 5

हालांकि शीर्ष उत्तर सीमा को हटाता है, लेकिन यह तीर को भी हटा देता है जो उपयोगकर्ता के लिए तत्व का चयन करने के लिए पहचान करना असंभव नहीं है।

मेरा समाधान सिर्फ एक सफेद div (सीमा-त्रिज्या: 0px के साथ) का चयन करने के पीछे रहना था। इसकी स्थिति को निरपेक्ष, इसकी ऊंचाई का चयन करने के लिए निर्धारित करें, और आपको जाने के लिए अच्छा होना चाहिए!

Answer 6

कस्टम सही ड्रॉप-डाउन तीर के साथ समाधान, केवल सीएसएस का उपयोग करता है (कोई चित्र नहीं)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}

<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

Comments

पृष्ठभूमि की स्थिति जो मेरी आवश्यकताओं के लिए बेहतर काम करती थी: background-position: calc(100% - 4px) center, 100% center;यह तीर को चुनिंदा और दाईं ओर सभी के बीच में ले जाती है। शानदार शुरुआत के लिए बहुत बहुत धन्यवाद!

— ब्रैंडन

Answer 7

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

Comments

मैं सहमत हूं, यह अब तक का सबसे सरल और सबसे विश्वसनीय और पोर्टेबल समाधान है।

— जॉन हेंकेल

Answer 8

तीरों को खत्म करने से बचना चाहिए। एक समाधान जो ड्रॉपडाउन तीरों को संरक्षित करता है, पहले ड्रॉपडाउन से शैलियों को हटा दें:

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

फिर अपने HTML में ड्रॉपडाउन से पहले सीधे div बनाएँ:

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

और इस तरह से div शैली:

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

डिस्प्ले इनलाइन डिव को एक नई लाइन पर जाने से रोकेगा, पोज़िशन निरपेक्षता इसे पेज के प्रवाह से हटाती है। अंतिम परिणाम एक अच्छा साफ रेखांकन है जिसे आप अपनी इच्छानुसार स्टाइल कर सकते हैं, और उपयोगकर्ता द्वारा अपेक्षा के अनुसार आपका ड्रॉपडाउन अभी भी व्यवहार करता है।

Answer 9

इनसेट बॉक्स-शैडो ट्रिक करता है।

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

डेमो

Answer 10

किसी कारण से यह वास्तव में सीमा के रंग से प्रभावित है ??? जब आप मानक रंग का उपयोग करते हैं तो कोने गोल बने रहते हैं लेकिन यदि आप रंग बदलते हैं तो भी थोड़ा सा गोल हो जाता है।

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

https://jsfiddle.net/hLg70o70/2/

Comments

Hmm OSX के बारे में निश्चित नहीं है। बस इसे फिर से विंडोज (क्रोम संस्करण 45.0) पर आज़माया और यह अभी भी काम करता है। मुझे लगता है कि इस मुद्दे को और अधिक अजीब बनाने के लिए यह मंच विशिष्ट है ...

— mcallahan

ऐसा इसलिए है क्योंकि बॉर्डर सेट करने से ब्राउज़र को कॉम्बोक्स को स्वयं प्रस्तुत करना पड़ता है, बजाय ओएस द्वारा प्रदान किए गए अंतर्निहित का उपयोग करने के।

— कोंग

Answer 11

अच्छा मुझे समाधान मिल गया। आशा है कि यह आपकी मदद कर सकता है :)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }

<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

Answer 12

निम्नलिखित इसे करने का तरीका है;

1. एक पृष्ठभूमि छवि बनाएं जो ड्रॉपडाउन की तरह दिखती है।
2. ब्राउज़र उपस्थिति बंद करें
3. चयन घटक पर पृष्ठभूमि छवि संरेखित करें

  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }

Answer 13

मैंने jordan314 के समाधान का उपयोग किया, लेकिन फिर मैंने चयन करने के लिए "सीमा-प्रकाश" वर्ग जोड़ा। यदि आपके पास सीएसएस में डिफ़ॉल्ट सीमा-प्रकाश वर्ग परिभाषित है, तो आप सीधे इसका उपयोग कर सकते हैं। यह बस सीमा को सफेद के रूप में परिभाषित करता है)। मैंने सीमा को चौकोर / त्रिज्या को हटाने के लिए बदल दिया, और तीर को बनाए रखा।

मैंने जो किया था यह रहा:

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

यदि आपके पास पूर्वनिर्धारित सीमा-प्रकाश नहीं है, तो बस अपनी सीएसएस में जोड़ें:

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

Answer 14

फ़ायरफ़ॉक्स: १:

.squaredcorners {
    -moz-appearance: none;
}

Comments

Chrome / Webkit के बारे में प्रश्न।

— जिशे

Answer 15

सीएसएस के रूप में सेट करें

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

कोशिश करें कि यह काम करे।