ক্রোম / ওয়েবকিটের কোনও <নির্বাচন> উপাদান থেকে বৃত্তাকার কোণগুলি সরানো

Question

ক্রোমের জন্য ব্যবহারকারী-এজেন্ট স্টাইলশিটটি একটি <select>উপাদানের সমস্ত কোণে 5px এর সীমানা ব্যাসার্ধ দেয় । আমি আমার বাহ্যিক স্টাইলশিটের মাধ্যমে 0px এর ব্যাসার্ধ প্রয়োগ করার পাশাপাশি উপাদানটিতে নিজেই ইনলাইন করে এ থেকে মুক্তি পাওয়ার চেষ্টা করেছি; আমি উভয়ই চেষ্টা করেছি border-radius:0pxএবং -webkit-border-radius:0px;এবং আরও সুনির্দিষ্ট চেষ্টা করেছি border-top-left-radius:0px(এটি-ওয়েবকিট সমতুল্য সহ)।

কেউই কাজ করছে না।

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

কোন ধারনা?

Comments

আপনি কি কোড পোস্ট করতে পারেন? আরও ভাল যদি আপনি jsfiddle.net ব্যবহার করে এটি পোস্ট করেন।

— এনজিএন

উইন 7 তে ক্রোম 10-এ ডিফল্ট স্টাইল হিসাবে আমার কাছে আসলে কোনও সীমানা-ব্যাসার্ধ নেই, সম্ভবত এটি অন্য সংস্করণ বা ওএস?

— ওয়েসলি মার্চ 15

উইন্ডোজ 7 এ Chrome 12 এ কোনও বৃত্তাকার কোণ নেই।

— andyb

ম্যাক ওএস এক্স

— ম্যাক্সিডিসন

Answer 1

এটি আমার জন্য কাজ করে (শৈলীর প্রথম উপস্থিতি ড্রপডাউন তালিকার নয়):

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

http://jsfiddle.net/fMuPt/

Comments

বৃত্তাকার কোণগুলি সরানোর কোনও উপায় কিন্তু তীর ডানদিকে রাখুন?

— আদম

আপনার তীরগুলি যুক্ত করতে হবে যেমন 100% 50% অবস্থানের পটভূমি চিত্র হিসাবে এবং কোনও পুনরাবৃত্তি বৈশিষ্ট্য attrib অতিরিক্ত http অনুরোধগুলি এড়াতে আমি CSS তে বেস 64 এনকোডযুক্ত চিত্রটি ব্যবহার করেছি।

— কার্ল অ্যাডলার

@ অ্যাডাম এটির জন্য কাজ করেছেন যদি আপনি এই জাতীয় border: 0রূপরেখা ব্যবহার করেন এবং যোগ করেন:outline: 1px inset black; outline-offset:-1px

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

@ ফিলিপপিরীরা ভালো লাগছে, যদিও আমি যুক্ত করতে হবে যে রূপরেখা-অফসেট IE দ্বারা সমর্থিত নয়।

— টিম

এটি ডানদিকে তীরগুলি সরিয়ে দেয়, যা অগ্রহণযোগ্যভাবে ব্যবহারকারীর অভিজ্ঞতার ক্ষতি করে। পরিবর্তে, ড্রপডাউন স্টাইল করুন background-color: #yourbgএবং border-style: noneতারপরে 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

এটিই একমাত্র উত্তর যা আমার সমস্যার সমাধান করেছে, যদিও ব্যাকগ্রাউন্ড বনাম ব্যাকগ্রাউন্ড-চিত্র ব্যবহারে সচেতন থাকুন কারণ এসভিজি-র পূরণের রঙটি আপনার ইনপুটটির জন্য যে কোনও ব্যাকগ্রাউন্ডের রঙ সেট করে ফেলেছে overw

— লুকাস এম

সম্মত, দয়া করে এই উত্তরটি দিন! অসম্পূর্ণ উত্তরে আমি অন্য ভোটগুলি বুঝতে পারি না। ইনলাইন এসভিজির পরিবর্তে ফন্টউইজ আইকন ব্যবহার করার কোনও পরামর্শ?

— নিকোলাস থেরি

ফন্টআউবিজ হ'ল আইকনগুলির সংকলন তবে আপনার কেবল একটি আইকন প্রয়োজন। সুতরাং আপনাকে আইকোনমুনের মতো কিছু সরঞ্জাম ব্যবহার করে এফএ আইকনগুলির একটি বের করতে হবে io তার পরে সেই আইকনটি একটি এসজিজি বা পিএনজি ফাইল হিসাবে রপ্তানি করে আপনার সিএসএস থেকে লিঙ্ক করুন

— আফজাল হোসেন

দুর্দান্ত সমাধান, তবে আমার পরিস্থিতিতে আমি পটভূমির রঙ যুক্ত করেছি: সাদা;

— ভিক্টর বোগুটসকি

তবে নোট করুন, যখন আপনি সেট করবেন width: auto;, যোগ করা এসভিজি তীরটি নির্বাচনের সামগ্রীতে ওভারলে করে। এর জন্য 16px এর ডান দিকে অতিরিক্ত প্যাডিং দরকার। এই ব্র্যাডিংটি অন্য ব্রাউজারগুলিতে নকশা ভেঙে সমস্ত ব্রাউজারে দৃশ্যমান। এখনও এর জন্য আমার কোনও সমাধান নেই ...

— ক্লাস ভ্যান ডার ওয়েইজ

Answer 3

আপনি যদি বর্গক্ষেত্রের সীমানা চান এবং এখনও সামান্য বিস্তৃত তীর চান তবে আমি এটি সুপারিশ করছি:

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

Comments

এই সঙ্গে সমস্যা হল আপনি ডিফল্ট ওভাররাইড হবে outlineউপর :focus। আপনি এই উত্তর ব্যবহার করতে যাচ্ছি, তাহলে আপনি উচিত আপনার পরিবর্তন select:focusশৈলী চাক্ষুষরূপে দেখায় যে selectসক্রিয়, বা তৈরি হয় উপাদান :focusক্লিক ইডি।

— ডেভিন ম্যাকিনিস

@ jordan314 এই ছবিটিতে বৃত্তাকার কোণগুলি দেখুন । সীমানা ব্যাসার্ধ: 0; নির্বাচিত ট্যাগটিতে কোনও প্রভাব নেই। কমপক্ষে Chrome OSX এ যাইহোক

— জামার

@ Im মিমি এটি আশ্চর্যজনক, আমি ক্রোম ওএস এক্সেও আছি এবং এখানে উপরের ফ্রেড imgur.com/r6ce6Yv

— jordan314

@ jordan314 এটি সম্পর্কে কীভাবে? jsfiddle.net/78xa6qud/2 । আমি অনুমান করি যে নির্বাচনের ব্যাকগ্রাউন্ড এবং এর পেছনের পটভূমি একই রঙ থাকলে আমরা এটিকে থেকে দূরে সরে যেতে পারি।

— জামার

@ Im মিমি আঃ হ্যাঁ, আমি অনুমান করি এটি একটি সতর্কতামূলক বিষয়।

— jordan314

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

উপরের উত্তরটি সীমানা সরিয়ে ফেললে এটি তীরটিও সরিয়ে দেয় যা ব্যবহারকারীর পক্ষে উপাদান হিসাবে নির্বাচন হিসাবে চিহ্নিত করা অসম্ভব না হলে এটি অত্যন্ত কঠিন করে তোলে।

আমার সমাধানটি কেবল নির্বাচনের পিছনে একটি সাদা ডিভ (সীমানা-ব্যাসার্ধ: 0 পিক্সেল সহ) স্টিক করা ছিল। এটির অবস্থানটি নিখুঁততে সেট করুন, নির্বাচনের উচ্চতায় এর উচ্চতা দিন এবং আপনার যেতে ভাল হওয়া উচিত!

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

এটিকে সহজ রাখার এবং তীরগুলি এবং এই জাতীয় বৈশিষ্ট্যগুলির সাথে জগাখিচু এড়ানোর একটি উপায় কেবলমাত্র এটি বেছে নেওয়া ট্যাগ হিসাবে একই পটভূমির রঙের সাথে ডিভিতে রাখা।

Comments

আমি সম্মত, এটি এখন পর্যন্ত সবচেয়ে সহজ এবং সবচেয়ে নির্ভরযোগ্য এবং বহনযোগ্য সমাধান।

— জন হেন্কেল

Answer 8

তীরগুলি নির্মূল করা এড়ানো উচিত। ড্রপডাউন তীর সংরক্ষণ করে এমন একটি সমাধান হ'ল প্রথমে ড্রপডাউন থেকে শৈলীগুলি সরানো:

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

তারপরে আপনার এইচটিএমএলে ড্রপডাউন করার আগে সরাসরি ডিভ তৈরি করুন:

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

এবং এইভাবে ডিভ স্টাইল করুন:

.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

হুম ওএসএক্স সম্পর্কে নিশ্চিত নয়। এটি আবার উইন্ডোজ (ক্রোম সংস্করণ 45.0) এ আবার চেষ্টা করে দেখুন এটি এখনও কার্যকর হয়। আমি অনুমান করি বিষয়টি আরও অদ্ভুত করে

— তুলবে

এর কারণ সীমানা নির্ধারণের ফলে ব্রাউজারটি ওএস দ্বারা সরবরাহিত অন্তর্নিহিত একটি ব্যবহার না করে নিজেই কম্বোবক্সকে রেন্ডার করে।

— কং

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

ফায়ারফক্স: 18

.squaredcorners {
    -moz-appearance: none;
}

Comments

ক্রোম / ওয়েবকিট সম্পর্কে প্রশ্ন।

— জিশে

Answer 15

সিএসএস হিসাবে সেট করুন

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

এটি যদি কাজ করে তবে চেষ্টা করুন।