বুটস্ট্র্যাপ 3-এ সিলেক্ট ট্যাগ থেকে সীমানা ব্যাসার্ধ সরান

Question

এটি একটি তুচ্ছ সমস্যার মত মনে হচ্ছে, তবে আমি এটি বুঝতে পারি না।

বুটস্ট্র্যাপগুলির নিজস্ব ওয়েবসাইটে তাদের নির্বাচনের উদাহরণ রয়েছে।

কোডটির দিকে তাকিয়ে দেখে মনে হচ্ছে যে নির্বাচনের উপাদানটিতে 4 এর সীমানা ব্যাসার্ধ রয়েছে।

আমার আশা এই যে সীমানা-ব্যাসার্ধকে 0 এ পরিবর্তন করা হলে সীমানা-ব্যাসার্ধকে নির্বাচিত উপাদান থেকে সরিয়ে দেওয়া হবে, তবে এটি তেমনটি নয় - নীচের ছবিতে দেখা গেছে।

আমি সমস্ত সিএসএস অন্বেষণ করেছি যা সেই নির্বাচিত উপাদানটি পরিবর্তন করছে তবে এর কোনওটিই বর্ডার ব্যাসার্ধকে সরিয়ে ফেলবে বলে মনে হয় না।

Comments

.form-controlক্লাসে সীমানা ব্যাসার্ধ পরিবর্তন করা আমার পক্ষে ভাল কাজ করে। bootply.com/Q7goAsFc0B

— j08691

এমনকি আপনার উদাহরণেও সেই নির্বাচিত উপাদানটির বৃত্তাকার কোণ রয়েছে ...?

— টাইলার ম্যাকগিনিস

এটি ক্রমের সাথে একটি সমস্যা সক্রিয় করে। ফায়ারফক্সে আপনার বুটপ্লিটি খুলতে এটি গোল হয় না। রহস্যময়।

— টাইলার ম্যাকগিনিস

ক্রোম এবং এফএফ উভয় ক্ষেত্রেই আমার পক্ষে কাজ করে।

— j08691

আমার জন্য এটি ক্রোমে কাজ করে না তবে ফায়ারফক্সে সূক্ষ্মভাবে কাজ করে

— ম্যাভেরিক

Answer 1

এখানে একটি আধুনিক সংস্করণ যা সমস্ত আধুনিক ব্রাউজারে কাজ করে। কীটি ব্যবহার করছে appearance:noneযা ডিফল্ট ফর্ম্যাটিংটি সরিয়ে দেয়। যেহেতু সমস্ত ফর্ম্যাটিং শেষ হয়ে গেছে, আপনাকে তীরটিতে ফিরে যুক্ত করতে হবে যা ইনপুট থেকে চাক্ষুষভাবে নির্বাচনকে পৃথক করে। দ্রষ্টব্য: appearanceআইই তে সমর্থিত নয় ।

কার্যকারী উদাহরণ: 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>

মন্তব্যে আরনো টেনকিঙ্কের পরামর্শের ভিত্তিতে , এ ব্যবহার করে একটি উদাহরণ এখানে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

এটিই আসল উত্তর হওয়া উচিত।

— অ্যাভোলিভা

এটি নির্বাচিতটির চেয়ে উত্তম উত্তর

— ক্রিস জেমস চ্যাম্পিয়ো

আপনি এটির জন্য একটি এসভিজিও ব্যবহার করতে পারেন। <?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 হিসাবে সংরক্ষণ করুন এবং এটি একটি পটভূমি হিসাবে ব্যবহার করুন।

— আরনো টেনকিঙ্ক

এই উত্তর।

— কনরাড ওয়ারহল

এটি অবশ্যই সেরা উত্তর। আমি কয়েকবার এটি করার জন্য একটি উপায় অনুসন্ধান করেছি। এটা অনেক সাহায্য করা উচিত, ধন্যবাদ! :)

— jaredwilli

Answer 2

এ ছাড়াও border-radius: 0অ্যাড -webkit-appearance: none;।

Comments

সমাধানটি সঠিক - তবে দেব সরঞ্জামগুলিতে কেন এটি ঘটছে তা দেখার পক্ষে সক্ষম হচ্ছেন না straight ধাঁধা মানুষ সমাধান করার জন্য ধন্যবাদ!

— mmln

এটি কাজ করে তবে নিখুঁত নয়, -webkit-appearance: none;ডানদিকে তীর সূচকটির নির্বাচিত অভাবের কারণ ঘটবে।

— সারা

@nightire এটা আমার জন্য কাজ করে আপনি ব্যবহার border: 0এবং মত একটি রূপরেখা যোগ করুন: outline: 1px inset black; outline-offset:-1px। তীরগুলি রাখবে এবং আপনি বাহ্যরেখার সাথে সীমানা নকল করতে পারবেন।

— ফিলিপ পেরেইরা

হ্যাঁ এটি সত্যিই কোনও সমাধান নয় কারণ প্রত্যেকের মতোই নির্বাচক তীর অদৃশ্য হয়ে গেছে।

— চাদ জনসন

আইই ভুলবেন না! :) নির্বাচন করুন :: - এমএস-প্রসারণ {প্রদর্শন: কিছুই নয়; }

— কাইল হক হক

Answer 3

আমার একই সমস্যা ছিল এবং যখন ব্যবহারকারী 1732055 এর উত্তর সীমানা স্থির করে, এটি ড্রপডাউন তীরগুলি সরিয়ে দেয়। আমি 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>

CSS:

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

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

Comments

এটি কেবলমাত্র যদি কাজটিতে সাদা ব্যাকগ্রাউন্ড থাকে তবে কাজ করে। অন্যথায় অন্য একটি রঙ ব্যবহার করা হলে একটি ব্যাসার্ধ থাকবে।

— মিশাল চ

হাই @ মিচাল চ, ভাল ক্যাচ! এটি ঘুরে দেখার এক উপায় হ'ল র‌্যাপারের ব্যাকগ্রাউন্ড-কালারটিকে নির্বাচন করা উপাদান হিসাবে একই মান হিসাবে সেট করা। প্রদর্শনের জন্য এখানে 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;বাঞ্ছনীয় নয় যেমন সব স্টাইলিং Chrome এর দ্বারা সম্পন্ন বন্ধ করে দেবে।

Comments

তবে এটিরও সমস্যা আছে; ফোকাস করার সময় এটি বাহ্যরেখা সীমানার ব্যাসার্ধ সাফ করে না।

— elquimista

@ এলকুইমাস্টা আপনি কেবল এটির outline: none;জন্য ব্যবহার করতে পারেন ।

— gns 11

Answer 5

গৃহীত উত্তরের সাথে মিলিত একটি ডেটা ইউআরএল হিসাবে @ আরনোটেনকিংকের এসভিজি ব্যবহার করা, এটি আমাদের রেটিনা প্রদর্শনের জন্য সঠিক সমাধান দেয়।

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; }

বুটস্ট্র্যাপ সিএসএস অন্তর্ভুক্ত করার পরে ওভাররাইড toোকানোর বিষয়ে নিশ্চিত হন।

আপনি যদি কেবলমাত্র নির্বাচন করা ফর্ম-নিয়ন্ত্রণ ব্যবহারের ব্যাসার্ধ সরাতে চান

select.form-control { ... }

পরিবর্তে

সম্পাদনা: ক্রোম, ফায়ারফক্স, অপেরা এবং সাফারি, আই 9 + (সমস্তই লিনাক্স / সাফারি এবং আইপিএল প্লেঅনলিনাক্সে চলছে) এ আমার জন্য কাজ করে

Comments

আমি কীভাবে ফর্ম নিয়ন্ত্রণে সীমানা-ব্যাসার্ধকে পরিবর্তন করেছি এবং এটি কার্যকর হয়নি ... এমন প্রশ্নে আমি বিশেষভাবে দেখিয়েছি, যা আমাকে প্রশ্ন জিজ্ঞাসা করতে প্ররোচিত করেছিল।

— টাইলার ম্যাকগিনিস

jsfiddle.net/Ut4y9/3 এখানে একটি কার্যকারী ফিডল। যদি এটি এখনও আপনার মেশিনে কাজ করে না, আপনি দয়া করে আপনি যে ব্রাউজারটি ব্যবহার করছেন তা নির্দিষ্ট করতে পারেন? আমি আপনার সমস্যা পুনরুত্পাদন করতে পারবেন না। দুঃখিত

— jBear গ্রাফিক্স

রহস্যময়। আমি ক্রোমের সর্বশেষতম সংস্করণ ব্যবহার করছি। স্পষ্টতই এটি এমন কিছু মেশিন নির্দিষ্ট, যেহেতু আপনি উভয়ই এটি পরিবর্তিত দেখছেন। আপনার উত্তরটি সম্পাদনা করুন যাতে আমি আমার ডাউনটোট পরিবর্তন করতে পারি :)

— টাইলার ম্যাকগিনিস

আমি একই সমস্যা পেয়েছি। আমার সীমানা-ব্যাসার্ধকে ছাড়িয়ে যাওয়া সত্ত্বেও এটি এখনও দেখায়। আমাকে বাদাম চালাচ্ছে

— ব্যবহারকারী1732055

এটি এখনও সাম্প্রতিকতম বুটস্ট্র্যাপ 3

— জেনিকিলাবের সাথে