কীভাবে কেবল সিএসএস দিয়ে <শিরোনাম> স্টাইল করবেন?

Question

দ্রষ্টব্য: এই প্রশ্নটি কাস্টম ড্রপডাউন করার বিষয়ে নয়। এটি কেবল সিএসএসে নির্বাচিত <option>উপাদানগুলির মধ্যে স্টাইলিং উপাদানগুলির সম্ভাবনা সম্পর্কে

আমি ক্রস-ব্রাউজারের সামঞ্জস্যের সাথে <option>কোনও <select>উপাদানটির স্টাইল কীভাবে করব ? আমি অনেক জাভাস্ক্রিপ্ট উপায় জানি যা ড্রপডাউনটি রূপান্তর করতে কাস্টমাইজ করে <li>, যার বিষয়ে আমি জিজ্ঞাসা করি না।

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

আমি জিজ্ঞাসা করছি যে কেবল আইএস 9 +, ফায়ারফক্স এবং ক্রোমের সামঞ্জস্যের সাথে সিএসএস দিয়ে কী কী সম্ভব।

আমি এটির মতো বা যতটা সম্ভব কাছাকাছি স্টাইল করতে চাই।

আমি এখানে http://jsfiddle.net/jiteendervyas/juwz3/3/ চেষ্টা করেছি , তবে ফায়ারফক্স আরও কিছু দেখায় ক্রোম ফন্টের রঙ ছাড়া অন্য কোনও স্টাইলিং প্রদর্শন করে না। ক্রোমেও কীভাবে সীমান্ত এবং প্যাডিংয়ের কাজ পাবেন?

Comments

@ মানসেউক - এটি কেবল <option>পুরো ড্রপডাউন নয়

— জিতেন্দ্র ব্যাস

@ মানসেউক: আমি নিশ্চিত নই যে এটি একই রকম। এই প্রশ্নটি জিজ্ঞাসা করে যে আপনি <select>পৃষ্ঠায় উপাদানটির উপস্থিতিটি স্টাইল করতে পারবেন কিনা । এই <option>উপাদানটি জিজ্ঞাসা করে আপনি উপাদানগুলির তালিকাটি স্টাইল করতে পারেন কিনা asks

— অ্যান্ডি ই

Godশ্বরের দৃষ্টিতে এটি দুটি সংযুক্ত প্রশ্নের কোনওরই সদৃশ নয় (যা উপায় দ্বারা একে অপরের থেকে পৃথক)। একটিতে কেবল স্টাইলিং সম্পর্কে নির্বাচন করা হয় এবং বিকল্পটি নয়, অন্যদিকে বিকল্পগুলি স্টাইলিং সম্পর্কে জিজ্ঞাসা করা হয় এবং অন্যটিতে কেবলমাত্র সিএসএস / নো-জেএসের প্রয়োজনীয়তা নেই।

— মাত্তেও

আমি ভুলরূপে সদৃশ হিসাবে চিহ্নিত প্রশ্নগুলি দেখতে অসুস্থ, বা ভুলভাবে প্রমাণিত হওয়া সত্ত্বেও বছরের পর বছর ধরে ভুলভাবে বন্ধ রয়েছে।

— ম্যাটটিও

@ovokuro codepen.io/lambder/pen/NbmwRb

— Lambder

Answer 1

2015 মে সম্পাদনা করুন

দাবি অস্বীকার: আমি নীচে লিঙ্কিত উত্তর থেকে স্নিপেট নিয়েছি:

গুরুত্বপূর্ণ আপডেট!

ফায়ারফক্স 35 হিসাবে ওয়েবকিট ছাড়াও আমরা appearanceসম্পত্তিটি ব্যবহার করতে সক্ষম হব :

ব্যবহার -moz-appearanceসঙ্গে noneএকটি কম্বো উপর মান এখন ড্রপডাউন বাটনে অপসারণ

সুতরাং এখন ডিফল্ট স্টাইলিংটি আড়াল করার জন্য এটি আমাদের নির্বাচিত উপাদানটিতে নিম্নলিখিত বিধিগুলি যুক্ত করার মতোই সহজ:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

আইই 11 সমর্থনের জন্য, আপনি [ ::-ms-expand] [15] ব্যবহার করতে পারেন ।

select::-ms-expand { /* for IE 11 */
    display: none;
}

পুরানো উত্তর

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

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

সম্পাদনা

আপনি যে প্রশ্নটি কিছুক্ষণ আগে জিজ্ঞাসা করেছিলেন তা এখানে। কীভাবে জাভাস্ক্রিপ্ট ছাড়াই সিএসএস সহ কোনও <সিলেক্ট> ড্রপডাউন স্টাইল করবেন? এটি সেখানে বলেছে, কেবল ক্রোমে এবং কিছুটা ফায়ারফক্সে আপনি যা চান তা অর্জন করতে পারেন। অন্যথায়, দুর্ভাগ্যক্রমে, একটি নির্বাচন স্টাইলিংয়ের জন্য কোনও ক্রস ব্রাউজার খাঁটি সিএসএস সমাধান নেই।

Comments

+1 ধন্যবাদ এটি ভাল কোড। কিন্তু আমার ক্ষেত্রে আমি সঙ্গে কাজ করতে চান <select>। <div>শব্দার্থগতভাবে ব্যবহার সঠিক নয়।

— জিতেন্দ্র ব্যাস

@ জিতেন্দ্রব্যাস, আমি জানি, কিন্তু আমি যেমন উত্তর দিয়েছি, তা সম্ভব নয়। প্রথম ছবিতে আপনি যা অর্জন করেছেন তা আপনি সবচেয়ে বেশি করতে পারেন। সম্পাদনা দেখুন। যাইহোক, আমি আপনার আগের প্রশ্নের উত্তরও দিয়েছি, দয়া করে এটি দেখুন।

— সাভাস বেদোভা

'গুরুত্বপূর্ণ আপডেট' অংশটি অনুমান করে যে আপনি optionসিএসএস দিয়ে ট্যাগগুলি স্টাইল করতে পারেন , তবে আপনি পারবেন না, আপনি কেবল selectট্যাগকে স্টাইল করতে পারেন । যা এই উত্তরে

— এসএনএনএম

এখানে উপরোক্ত উদাহরণটির একটি জাভাস্ক্রিপ্ট সংস্করণ যা কলব্যাক এবং কিছু অন্যান্য দরকারী বৈশিষ্ট্য যুক্ত করেছে: ডায়নামিকড্রাইভ.com

— কোকো পাফ 23

Answer 2

স্টাইলিং বিকল্প উপাদানগুলির কোনও ক্রস ব্রাউজারের উপায় নেই, অবশ্যই আপনার দ্বিতীয় স্ক্রিনশটের পরিধি নয়। আপনি তাদের সাহসী করতে সক্ষম হবেন এবং হরফ আকার নির্ধারণ করতে সক্ষম হবেন তবে এটিই হবে ...

Answer 3

আমি জাভাস্ক্রিপ্টের সাথে কার্যকারিতা ওভাররাইড না করে বাছাই করা আইটেমগুলি নিয়ে প্রায় খেলেছি, ক্রোমে এটি সম্ভব বলে আমি মনে করি না। আপনি কোনও প্লাগইন ব্যবহার করুন বা নিজের কোড লিখুন না কেন, সিএসএস কেবল ক্রোম / সাফারি নয় এবং আপনি যেমন বলেছিলেন, ফায়ারফক্স এর সাথে কাজ করার ক্ষেত্রে আরও ভাল।

Comments

দয়া করে শেষ অনুচ্ছেদটি সরান - URL টি অনলাইনে অ্যাক্সেসযোগ্য নয়।

— কুমারহর্ষ