আমি কীভাবে ম্যাকের সাফারিতে একটি নির্বাচিত উপাদানটির চকচকে অপসারণ করতে পারি?

Question

ম্যাকস এবং আইওএস ডিভাইসগুলিতে, সাফারিতে, <select>পটভূমির রঙযুক্ত একটি উপাদান নিজের উপর একটি গ্লোস তৈরি করে। অন্যান্য অপারেটিং সিস্টেমে এটি ঘটবে বলে মনে হয় না।

উদাহরণস্বরূপ, এই শৈলীর বৈশিষ্ট্যগুলির সাথে আমার একটি নির্বাচন উপাদান রয়েছে:

select {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 10px 0 7px;
width: 250px;
background-color: #BD2786;
color: white;
letter-spacing: -.04em;
font-weight: bold;
border: 0;
}

এবং আমার উপাদানটির আমি চাই ব্যাকগ্রাউন্ডের রঙ রয়েছে তবে গ্লসটি এখনও আছে। কেউ কীভাবে এটি একটি ফ্ল্যাট রঙ করতে জানেন?

Answer 1

@beanland; আপনাকে লিখতে হবে

-webkit-appearance:none;

আপনার সিএসএসে

এটি পড়ুন http://trentwalton.com/2010/07/14/css-webkit-appearance/

Comments

ধন্যবাদ দেওয়ার দরকার নেই কারণ এমন অনেক কিছুই আছে যা আমি জানতাম না :)

— সন্দীপ

ডানদিকে তীর রাখার কোনও উপায় আছে? আমি কেবল রঙটি ওভাররাইড করতে চাই। আপনাকে ধন্যবাদ

— মার্ক

@ সন্দীপ: এবং এটিকে ক্রস ব্রাউজারগুলি তৈরি করতে:-moz-appearance: none; -webkit-appearance: none; appearance: none;

— ডোরিয়ান

@ মার্ক যদি 3 বছর পরে আপনি এখনও আগ্রহী হন .. আমি তীর দেখানোর জন্য একটি সমাধান পেয়েছি।

— অ্যালিক্সসালমন

আইই এর সমাধানটি হল :: - এমএস-প্রসারণ {প্রদর্শন নির্বাচন করুন: কিছুই নয়; IE স্থানীয় আই সিলেক্টবক্স ড্রপডাউন আইকনটি গোপন করতে, তারপরে নতুন আইকনটির ব্যাকগ্রাউন্ড হিসাবে একটি আসল পিএনজি চিত্র ব্যবহার করুন। সমস্যা দেখা দেয় কারণ এসভিজি চিত্রগুলি সর্বদা আইএস এর সিএসএসের মাধ্যমে যথাযথভাবে থাকে না।

— ফিলিস সাদারল্যান্ড

Answer 2

ব্যবহার -webkit-appearance:none;এছাড়াও তীর বোঝা যায় যে এই একটি ড্রপডাউন হয় মুছে ফেলা হবে।

এই স্নিপেটটি দেখুন যা এটি বিভিন্ন ব্রাউজার জুড়ে কাজ করে কোনও চিত্র ফাইল অন্তর্ভুক্ত না করে একটি কাস্টম তীর যুক্ত করে:

select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Comments

মিষ্টি, তীর সংশোধন প্রশংসা! এখানে স্বচ্ছ পটভূমি সঙ্গে একটি সংস্করণ: নির্বাচন {পটভূমি: URL (ডাটা: চিত্র / SVG + XML; করুন Base64-, PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + + PHRpdGxlPmFycm93czwvdGl0bGU + + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =) নো পুনরাবৃত্তি 95% 50%; ।

— ইনগো রেনার

: একটি স্বচ্ছ তীর (এখানে দৈর্ঘ্যের কারণে আটকাতে পারবেন পারে) তৈরি pastebin.com/HQ0x4Rka

— ডিপার্টমেন্ট

আপনার যদি বিস্তৃত নির্বাচনের উপাদান থাকে তবে এটি কিছুটা দূরে দেখাবে। এটি ঠিক করতে, আপনি ব্যাকগ্রাউন্ডটি আরও ভালভাবে সারিবদ্ধ করতে CSS3 এর পটভূমি অবস্থান প্রান্ত অফসেট ব্যবহার করতে পারেন। তাই প্রতিস্থাপন no-repeat 95% 50%সঙ্গেno-repeat right 2px center

— iSWORD

একই তীরগুলি তবে সাদা এবং স্বচ্ছ পেস্টবিন.কম

— 41

আমি লক্ষ্য করেছি যে যোগ করা তীরগুলি একটি উপরে / ডাউন তীর উভয়কেই অন্তর্ভুক্ত করে - কেবলমাত্র নীচের তীরটি দেখানোর জন্য কোনও দ্রুত সমাধান?

— ব্রেট

Answer 3

2019 সংস্করণ

সংক্ষিপ্ত ইনলাইন চিত্র URL টি, কেবল নীচে তীর দেখায়, স্বনির্ধারিত তীরের রঙ ...

Https://codepen.io/jonmircha/pen/PEvqPa থেকে

লেখক সম্ভবত জোনাথন মিরচা

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
}

Comments

background-colorসম্পত্তি নির্বাচন উপাদানের পটভূমি ক্ষেত্রে প্রযোজ্য। ডাউন তীরের রং পরিবর্তন করতে আপনাকে ইউআরএল-তে এসভিজি ফিলের সম্পত্তিটি পরিবর্তন করতে হবে, উদাহরণস্বরূপfill='%23fc0000'

— নোয়েল আব্রাহাম

গণনা ছাড়াই ব্যাকগ্রাউন্ড-অবস্থান ব্যবহার করা ভাল: পটভূমি-অবস্থান: ডান .8 এম শীর্ষে 60%; এবং কিছু কার্সার প্রয়োজন

— Iggy

এটির কোনও ডাবল-অ্যারো সংস্করণ কি কেউ প্রদর্শিত করতে পারে?

— বিবর্তিত

Answer 4

একটি পুরানো আইটেম গাদা করতে দুঃখিত। আমি এখানে আমার প্রশ্নের আংশিক উত্তর পেয়েছি তবে কিছু কাজ করতে হয়েছিল তাই আমি পরবর্তী ব্যক্তির জন্য আমার ফলাফলগুলি ভাগ করে নিতে চাই।

আমি অন্যান্য অবদানকারীদের মতো একই পদ্ধতি ব্যবহার করে শেষ করেছি, তবে নিম্নলিখিতগুলি ঠিক করার জন্য কয়েকটি টুইটের সাথে

1. দীর্ঘ সমাধান অন্য সমাধানগুলিতে তীরগুলি coveringেকে রাখছিল
2. ব্যবহৃত ইমেজটি কিছুটা পুরানো এবং কুশল আপ / ডাউন কম্বো তীর ছিল।

উপরের সমস্যাগুলি স্থির করে নীচে আপনাকে একটি কার্যক্ষম সমাধান দেবে। দ্রষ্টব্য: আমি আমার ব্যবহারের ক্ষেত্রে একটি সাদা তীর ব্যবহার করেছি, আপনার নিজের জন্য তীরের রঙ পরিবর্তন করতে হতে পারে।

এখানে একটি পূর্বরূপ দেখুন:

select{    
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=) no-repeat 101% 50%;
  padding-right:20px;
}

Comments

//, কীভাবে এবং কেন গ্লসটি মুছে ফেলবে তা বোঝাতে আপনি কি আপত্তি করবেন?

— নাথান বাসানিজ

সমাধানটি মূলত দুটি উপাদান রয়েছে: 1. অনুরোধ করুন যে ব্রাউজারটি উপাদানটিতে কোনও স্টাইল / প্রদর্শন না করে। ২. যুক্তিসঙ্গত স্টাইল সরবরাহ করুন। ব্রাউজারগুলিতে godশ্বর ভয়ঙ্কর নয় (পড়ুন, সাফারি নয়) ব্রাউজার সরবরাহকারী উপাদান শৈলীটি ভাল। সাফারিতে ব্রাউজার সরবরাহ শৈলী জঘন্য এবং ভয়ঙ্কর terrible ফলস্বরূপ আমাদের অবশ্যই প্রতিটি ব্রাউজারে প্রদর্শিত ব্রাউজারটিকে ওভাররাইড করতে হবে। উপস্থিতিগুলিতে শেষ হওয়া লাইনগুলি: উপরের অংশটি 1 টি করে না। অন্যান্য রেখাগুলি অংশ 2 মোকাবেলা করে যে এটি সাহায্য করে?

— জাস্টিন এডওয়ার্ডস

Answer 5

ওয়েবেকিট-উপস্থিতি দেখুন: কোনওটি নয় এবং এর ডেরাইভেটিভস। মূলত এখানে ক্রিস কোয়ার বর্ণিত: https://css-tricks.com/almanac/properties/a/appearance/

Answer 6

যেমনটি এখানে বেশ কয়েকবার উল্লেখ করা হয়েছে

-webkit-appearance:none;

তীরগুলিও সরিয়ে দেয়, যা বেশিরভাগ ক্ষেত্রে আপনি চান তা নয়।

আমি খুঁজে পাওয়া একটি সহজ কাজ হ'ল সিলেক্টের পরিবর্তে সিলেক্ট 2 ব্যবহার করা । আপনি একটি সিলেক্ট 2 উপাদানও পুনরায় স্টাইল করতে পারেন এবং সর্বাধিক গুরুত্বপূর্ণ, উইন্ডোজ, অ্যান্ড্রয়েড, আইওএস এবং ম্যাকের ক্ষেত্রেও সিলেক্ট 2 দেখতে একইরকম হয়।

Answer 7

আপনি যদি চোমের ব্যবহারকারী এজেন্ট স্টাইলশিটটি পরীক্ষা করেন তবে আপনি এটি খুঁজে পাবেন

outline: -webkit-focus-ring-color auto 5px;

সংক্ষেপে এর বাহ্যরেখা সম্পত্তি - এটি কিছুই না

যে আভা মুছে ফেলা উচিত

Comments

তিনি রূপরেখা সম্পর্কে জিজ্ঞাসা করছেন না, চকচকে পটভূমি।

— অ্যাপোলো