3 बूटस्ट्रैप में चयन टैग से सीमा त्रिज्या निकालें

Question

यह एक तुच्छ समस्या की तरह लगता है, लेकिन मैं इसका पता नहीं लगा सकता।

बूटस्ट्रैप की अपनी वेबसाइट पर उनके पास सेलेक्ट का उदाहरण है।

कोड को देखकर ऐसा लगता है कि उस चुनिंदा तत्व पर 4 का बॉर्डर-त्रिज्या है।

मेरी आशा है कि उस सीमा-त्रिज्या को 0 में बदलते हुए फिर सीमा-त्रिज्या को चुनिंदा तत्व से हटा दिया जाएगा, हालांकि, ऐसा नहीं है - जैसा कि नीचे दी गई तस्वीर में देखा गया है।

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

Comments

.form-controlकक्षा में सीमा का दायरा बदलना मेरे लिए ठीक काम करता है। bootply.com/Q7goAsFc0B

— j08691

आपके उदाहरण में भी उस चुनिंदा तत्व पर गोल कोनों हैं ...?

— टायलर मैकगिनीस

यह क्रोम के साथ एक मुद्दा है। फ़ायरफ़ॉक्स में अपने बूट को खोलना यह गोल नहीं है। अजीब।

— टायलर मैकगिनीस

मेरे लिए Chrome और FF दोनों में काम करता है।

— j08691

मेरे लिए यह क्रोम में काम नहीं करता है लेकिन फ़ायरफ़ॉक्स में ठीक काम करता है

— Maverick

Answer 1

यहां एक संस्करण है जो सभी आधुनिक ब्राउज़रों में काम करता है। कुंजी का उपयोग appearance:noneकिया जाता है जो डिफ़ॉल्ट स्वरूपण को हटा देता है। चूंकि सभी स्वरूपण समाप्त हो गए हैं, इसलिए आपको उस तीर में वापस जोड़ना होगा जो नेत्रहीन इनपुट से चयन को अलग करता है। नोट: appearanceIE में समर्थित नहीं है ।

काम करने का उदाहरण: https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}

<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

टिप्पणियों में Arno तेनकिंक के सुझाव के आधार पर , यहाँ एक का उपयोग करके एक उदाहरण दिया गया हैsvg के बजाय एक png एरो आइकन के लिए।

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1"><path d="M4 8L0 4h8z"/></svg>');
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}

<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Comments

यह असली जवाब होना चाहिए।

— avoliva

यह चयनित एक से बेहतर उत्तर है

— क्रिस जेम्स चंपियो

आप इसके लिए एक एसवीजी का उपयोग भी कर सकते हैं। <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="12px" viewBox="0 0 14 12" enable-background="new 0 0 14 12" xml:space="preserve"> <polygon points="3.862,7.931 0,4.069 7.725,4.069 "/></svg>यह एक ही फ़ाइल स्थान बचाता है। यह भी आसानी से उपलब्ध है और बनाए रखने में आसान है। इसे एक फ़ाइल में कॉपी करें और .svg के रूप में सहेजें और पृष्ठभूमि के रूप में उपयोग करें।

— अर्नो तेनकिंक

यह उत्तर है।

— कॉनराड वारहोल

यह निश्चित रूप से सबसे अच्छा जवाब है। मैंने कुछ समय ऐसा करने का तरीका खोजा है। यह बहुत मदद करनी चाहिए, धन्यवाद! :)

— जारेडविल्ली

Answer 2

इसके अलावा border-radius: 0, जोड़ने के लिए -webkit-appearance: none;।

Comments

समाधान सही है - लेकिन यह देखने में सक्षम नहीं है कि देव उपकरणों में ऐसा क्यों हो रहा है, यह सीधे गलत है। पहेली आदमी को हल करने के लिए धन्यवाद!

— एमएमएलएन

यह काम करता है लेकिन सही नहीं है, -webkit-appearance: none;दाईं ओर तीर संकेतक की कमी का कारण होगा।

— रात 12

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

— फिलिपेरे

हाँ, यह वास्तव में एक समाधान नहीं है क्योंकि, जैसा कि सभी ने कहा है, चयनकर्ता तीर गायब हो जाता है।

— चाड जॉनसन

IE मत भूलना! :) चयन :: - एमएस-विस्तार {प्रदर्शन: कोई नहीं; }

— काइल हॉक

Answer 3

मेरे पास एक ही मुद्दा था और जबकि user1732055 का उत्तर सीमा को ठीक करता है, यह ड्रॉपडाउन तीरों को हटा देता है। मैंने इसे selectतत्व से सीमा हटाकर और एक रैपर बनाकर हल किया है spanजिसमें एक सीमा है।

एचटीएमएल:

<span class="select-wrapper">
    <select class="form-control no-radius">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</span>

सीएसएस:

select.no-radius{
    border:none;
}    
.select-wrapper{
    border: 1px solid black;
    border-radius: 0px;
}

https://jsfiddle.net/Lrqh0drd/6/

Comments

यह तभी काम करता है जब चयन में सफेद पृष्ठभूमि हो। अन्यथा एक अन्य रंग का उपयोग करने पर एक त्रिज्या होगी।

— 18

हाय @ मिचल, अच्छा कैच! इसके आस-पास जाने का एक तरीका यह होगा कि रैपर के बैकग्राउंड-कलर को उसी वैल्यू पर सेट किया जाए जो सिलेक्ट एलिमेंट के बराबर है। यहाँ प्रदर्शित करने के लिए jsfiddle पर एक संशोधित संस्करण है: https://jsfiddle.net/Lrqh0drd/75/

— लोगान बेसेकर

यह सबसे साफ उपाय है।

— निकोले टसेनकोव

Answer 4

आप उपयोग कर सकते हैं -webkit-border-radius: 0;। ऐशे ही:-

-webkit-border-radius: 0;
border: 0;
outline: 1px solid grey;
outline-offset: -1px;

यह चौकोर कोनों के साथ-साथ ड्रॉपडाउन तीर देगा। उपयोग करने -webkit-appearance: none;की अनुशंसा नहीं की जाती है क्योंकि यह क्रोम द्वारा की गई सभी स्टाइलिंग को बंद कर देगा।

Comments

लेकिन इसमें एक समस्या भी है; जब यह ध्यान केंद्रित करने की रूपरेखा सीमा त्रिज्या को स्पष्ट नहीं करता है।

— एलक्विमिस्टा

@elquimista आप बस इसके लिए उपयोग कर सकते हैं outline: none;।

— 11:17 पर

Answer 5

स्वीकृत उत्तर के साथ संयुक्त डेटा url के रूप में @ArnoTenkink से SVG का उपयोग करना, यह हमें रेटिना डिस्प्ले का सही समाधान देता है।

select.form-control:not([multiple]) {
    border-radius: 0;
    appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2014%2012%22%20enable-background%3D%22new%200%200%2014%2012%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpolygon%20points%3D%223.862%2C7.931%200%2C4.069%207.725%2C4.069%20%22/%3E%3C/svg%3E);
    padding: .5em;
    padding-right: 1.5em
}

Answer 6

वर्ग कहा जाता है:

.form-control { border-radius: 0; }

बूटस्ट्रैप सीएसएस को शामिल करने के बाद ओवरराइड डालना सुनिश्चित करें।

यदि आप केवल चुनिंदा प्रपत्र-नियंत्रण उपयोग पर त्रिज्या को निकालना चाहते हैं

select.form-control { ... }

बजाय

संपादित करें: क्रोम, फ़ायरफ़ॉक्स, ओपेरा, और सफारी, IE9 + (सभी linux / सफारी और playonlinux पर IE पर चल रहा है) पर मेरे लिए काम करता है

Comments

मैंने विशेष रूप से प्रश्न में दिखाया कि कैसे मैंने सीमा-त्रिज्या को प्रपत्र नियंत्रण पर बदल दिया और यह काम नहीं किया ..., जिसने मुझे प्रश्न पूछने के लिए प्रेरित किया।

— टायलर मैकगिनीस

jsfiddle.net/Ut4y9/3 यहां वर्किंग फिडल है। यदि यह अभी भी आपकी मशीन पर काम नहीं कर रहा है, तो क्या आप उस ब्राउज़र को निर्दिष्ट कर सकते हैं जिसका आप उपयोग कर रहे हैं? मैं आपकी समस्या को पुन: पेश नहीं कर सकता। क्षमा करें

— jBear ग्राफिक्स

अजीब। मैं Chrome के नवीनतम संस्करण का उपयोग कर रहा हूं। जाहिर है कि यह कुछ मशीन विशिष्ट है क्योंकि आप दोनों इसे बदल रहे हैं। अपना उत्तर संपादित करें ताकि मैं अपने डाउनवोट को बदल सकूं :)

— टायलर मैकगिनिस

मुझे एक ही मुद्दा मिला है। सीमा-त्रिज्या के अतिरेक के बावजूद यह अब भी दिखता है। मुझे उत्तेजित कर रहा है।

— user1732055

यह अभी भी सबसे हाल ही में बूटस्ट्रैप 3 के साथ मामला है

— Genkilabs