আমি কীভাবে কেবল সিএসএস দিয়ে কোনও <সিলেক্ট> ড্রপডাউন স্টাইল করব?

Question

<select>ড্রপডাউন স্টাইল করার কি কোনও সিএসএস-কেবল উপায় আছে ?

আমার <select>কোনও জাভাস্ক্রিপ্ট ছাড়াই যতটা সম্ভব মানবিকভাবে একটি ফর্ম স্টাইল করা দরকার । সিএসএসে এটি করতে আমি কী কী বৈশিষ্ট্যগুলি ব্যবহার করতে পারি?

এই কোডটি সমস্ত প্রধান ব্রাউজারের সাথে সামঞ্জস্য করা দরকার:

• ইন্টারনেট এক্সপ্লোরার 6, 7, এবং 8
• ফায়ারফক্স
• আফ্রিকায় শিকার অভিযান

আমি জানি আমি এটি জাভাস্ক্রিপ্ট: উদাহরণ দিয়ে তৈরি করতে পারি ।

এবং আমি সাধারণ স্টাইলিংয়ের কথা বলছি না। আমি জানতে চাই, আমরা কেবল সিএসএসের সাথে কী করতে পারি সেরা।

স্ট্যাক ওভারফ্লোতে আমি একই রকম প্রশ্ন পেয়েছি ।

আর এই এক Doctype.com উপর।

Comments

গুগলে তেমন কিছুই পাওয়া যায় নি কেবল জেএস সমাধানে

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

আমি মনে করি এটি একটি বৈধ প্রশ্ন, তবে উত্তরটি "না, আসলেই নয়" বা "আপনি যেমন চান তেমন নয়"। তবে কেউ (আমি কেউই) এটি সম্পর্কে 100% নিশ্চিত নয়, এই অস্পষ্টতার অনুভূতি পাঠকের ত্বকের নীচে হামাগুড়ি দেয় এবং প্রশ্নের বৈধতা প্রশ্নবিদ্ধ হয়।

— জেডজেআর

@ জিতেন্দ্র, আমি জানি আপনি কী করছেন? আপনি যদি আপনার প্রশ্নটিকে আরও সুস্পষ্ট করে থাকেন তবে আমরা এটি পছন্দ করব। এছাড়াও, আমি মনে করি আপনি যা খুঁজছেন তা আমি পেয়েছি। এটি পরীক্ষামূলক, তবে এটি যাচাই করে দেখুন: cappuccino.org/aristo/showcase

— jeremyosborne

@ জেরেমোসবার্ন - উত্তরের জন্য ধন্যবাদ Thanks আমি জানি আমি এটি জাভাস্ক্রিপ্ট দিয়ে তৈরি করতে পারি। আপনার eaxmple লিঙ্ক জেএস উপর ভিত্তি করে। আমি কেন এই প্রশ্নটি জিজ্ঞাসা করেছি কারণ আমি জানতে চেয়েছিলাম, কেবলমাত্র সিএসএস দিয়ে আমরা সবচেয়ে ভাল কী করতে পারি সে সম্পর্কে কেউ কি জানেন

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

@ জিতেন্দ্র আপনার প্রশ্ন আপডেট করার জন্য ধন্যবাদ। আপনার সীমাবদ্ধতার সাথে আপনি নির্ভরযোগ্যভাবে সর্বোত্তমভাবে করতে পারেন (কেবলমাত্র সিএসএস এবং কোনও জেএস নয়) টাইপফেস (ফন্ট), পটভূমি এবং সম্মুখভাগ (পাঠ্য) রং, সীমানার আকার, চেহারা এবং রং, স্থান নির্ধারণ এবং আকার (সাধারণত টাইপের মাধ্যমে) ফন্টের মাধ্যমে সেটিংস)। তারপরেও, সমস্ত ব্রাউজারে জিনিসগুলি একই দেখায় তা নিশ্চিত করার জন্য আপনাকে সম্ভবত কয়েকটি টুইট করতে হবে। আমি আশা করি আমি এর চেয়ে আরও ভাল উত্তর সম্পর্কে জানতাম, এবং সম্ভবত আমি এখানে একটি মিস করেছি, তবে আমি তা মনে করি না।

— জেরেমোসবার্ন

Answer 1

এখানে তিনটি সমাধান রয়েছে:

সমাধান # 1 - উপস্থিতি: কোনওটিই নয় - ইন্টারনেট এক্সপ্লোরার 10 - 11 ওয়ার্কআউন্ড ( ডেমো ) সহ

-

appearance: noneনির্বাচিত উপাদানটিতে ডিফল্ট তীর সেটটি গোপন করতে , তার সাথে নিজের কাস্টম তীরটি যুক্ত করুনbackground-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

ব্রাউজার সমর্থন:

appearance: noneইন্টারনেট এক্সপ্লোরার 11 (এবং পরবর্তী) এবং ফায়ারফক্স 34 (এবং পরবর্তী) বাদে খুব ভাল ব্রাউজার সমর্থন ( ক্যানিউজ ) রয়েছে।

আমরা এই কৌশলটি উন্নত করতে এবং যোগ করে ইন্টারনেট এক্সপ্লোরার 10 এবং ইন্টারনেট এক্সপ্লোরার 11 এর জন্য সমর্থন যুক্ত করতে পারি

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

ইন্টারনেট এক্সপ্লোরার 9 যদি উদ্বেগের বিষয় হয় তবে আমাদের কাছে ডিফল্ট তীরটি সরানোর কোনও উপায় নেই (যার অর্থ এখন আমাদের দুটি তীর থাকবে), তবে আমরা একটি ফানকি ইন্টারনেট এক্সপ্লোরার 9 নির্বাচক ব্যবহার করতে পারি।

কমপক্ষে আমাদের কাস্টম তীরটিকে পূর্বাবস্থায় ফেরাতে - ডিফল্ট নির্বাচন করুন তীর অক্ষত রেখে।

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

সব একসাথে:

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

এই সমাধানটি সহজ এবং এতে ভাল ব্রাউজার সমর্থন রয়েছে - এটি সাধারণত যথেষ্ট।

---

যদি ইন্টারনেট এক্সপ্লোরার 9 (এবং পরবর্তী) এবং ফায়ারফক্স 34 (এবং তারপরে) এর জন্য ব্রাউজার সমর্থন প্রয়োজন হয় তবে পড়তে থাকুন ...

সমাধান # 2 ডিফল্ট তীরটি ( ডেমো ) আড়াল করতে নির্বাচনের উপাদানটি কেটে দিন

-

(এখানে আরও পড়ুন)

selectএকটি নির্দিষ্ট প্রস্থ এবং একটি ডিভ মধ্যে উপাদান মোড়ানো overflow:hidden।

তারপরে selectউপাদানটি ডিভের চেয়ে প্রায় 20 পিক্সেলের বেশি প্রস্থ দিন ।

ফলাফলটি হ'ল selectউপাদানটির ডিফল্ট ড্রপ-ডাউন তীরটি লুকানো থাকবে (ধারকটিতে থাকা কারণে overflow:hidden) এবং আপনি যে কোনও পটভূমি চিত্রটি ডিভের ডানদিকে রেখে দিতে পারেন।

সুবিধা এই পদ্ধতির এটি ক্রস ব্রাউজার (ইন্টারনেট এক্সপ্লোরার 8 এবং পরে, হয় ওয়েবকিট এবং গেকো )। যাইহোক, এই পদ্ধতির অসুবিধাটি হ'ল বিকল্পগুলি ড্রপ-ডাউনটি ডান হাতের দিক থেকে বেরিয়ে আসে (20 পিক্সেল যা আমরা লুকিয়ে রেখেছি ... কারণ বিকল্প উপাদানগুলি নির্বাচনের উপাদানটির প্রস্থ নেয়)।

[তবে এটি লক্ষ করা উচিত যে যদি কাস্টম সিলেক্ট উপাদানটি কেবল মোবাইল ডিভাইসের জন্য প্রয়োজনীয় হয় - তবে উপরের সমস্যাটি প্রযোজ্য না - কারণ প্রতিটি ফোন দেশীয়ভাবে নির্বাচিত উপাদানটি খুলবে। মোবাইলের জন্য, এটি সেরা সমাধান হতে পারে]]

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}

<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

---

ফায়ারফক্সে কাস্টম তীরটি যদি প্রয়োজনীয় হয় - সংস্করণ 35 এর পূর্বে - তবে আপনার ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলি সমর্থন করার প্রয়োজন নেই - তবে পড়া চালিয়ে যান ...

সমাধান # 3 - pointer-eventsসম্পত্তি ( ডেমো ) ব্যবহার করুন

-

(এখানে আরও পড়ুন)

এখানে ধারণাটি হ'ল নেটিভ ড্রপ ডাউন তীর (আমাদের কাস্টমটি তৈরি করতে) এর উপরে কোনও উপাদানকে ওভারলে করা এবং তারপরে পয়েন্টার ইভেন্টগুলিকে বারণ করা।

সুবিধা: এটি ওয়েবকিট এবং গেকোতে ভাল কাজ করে। এটি দেখতেও খুব ভাল লাগে ( optionউপাদানগুলি বের করে দেয় না)।

অসুবিধা: ইন্টারনেট এক্সপ্লোরার (ইন্টারনেট এক্সপ্লোরার 10 এবং নীচে) সমর্থন করে না pointer-events, যার অর্থ আপনি কাস্টম তীরটি ক্লিক করতে পারবেন না। এছাড়াও, এই পদ্ধতির সাথে আরেকটি (স্পষ্ট) অসুবিধা হ'ল আপনি আপনার নতুন তীর চিত্রটিকে হোভার ইফেক্ট বা হ্যান্ড কার্সার দিয়ে লক্ষ্য করতে পারবেন না, কারণ আমরা তাদের উপরে পয়েন্টার ইভেন্টগুলি কেবল অক্ষম করেছি!

তবে এই পদ্ধতির সাহায্যে আপনি আধুনিকায়িত বা শর্তসাপেক্ষ মন্তব্যগুলি ইন্টারনেট এক্সপ্লোরারকে তীরের মধ্যে নির্মিত মানটিতে ফিরিয়ে আনতে পারেন।

এনবি: ইন্টারনেট এক্সপ্লোরার 10 হওয়ায় conditional commentsআর সমর্থন করে না: আপনি যদি এই পদ্ধতির ব্যবহার করতে চান তবে আপনার সম্ভবত মডার্নজার ব্যবহার করা উচিত । তবে, এখানে বর্ণিত সিএসএস হ্যাকের সাহায্যে ইন্টারনেট এক্সপ্লোরার 10 থেকে পয়েন্টার-ইভেন্টস সিএসএস বাদ দেওয়া সম্ভব ।

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646E;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #DDD8DC;
  background: #FFF;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

Comments

এই 2 পদ্ধতি থেকে আপনার মতে কোনটি সেরা?

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

এটি নকশা প্রয়োজনীয়তার উপর নির্ভর করে। যদি আপনি ড্রপ-ডাউন জট আউট নিয়ে ঠিক থাকেন - তবে এটি সর্বোত্তম কারণ এটি ক্রস ব্রাউজার (আইএমও অলব্রাউজার + আই 8 + ক্রস-ব্রাউজার হিসাবে বিবেচনা করা যেতে পারে) তবে আমি অনেকের কাছে মনে করি - এটি করবে না। সুতরাং আসলে আমার উপরের বিবৃতিতে আমি বোঝাতে চেয়েছিলাম যে এপ্রোচ # 2 সেরা ছিল।

— ড্যানিয়েল্ড

এছাড়াও, আমি যে পোড়ামাটি পোস্ট করেছি তাতে আইআই এর ডিফল্ট তীর ব্যবহার করার অনুমতি দেওয়ার জন্য শর্তসাপূর্ণ বিবৃতি দিয়ে # 2 পদ্ধতির ব্যবহার করা হয়েছে।

— ড্যানিয়েল্ড

@ অ্যালেক্সিসেলকার্ক ডিভ ঠিক করা এবং একই প্রস্থে নির্বাচন করা কেবল ক্রোমের মতো ওয়েবেকিট ব্রাউজারগুলিতে কাজ করে। (কারণ আমি এই নিয়মটি অন্তর্ভুক্ত করেছি - ওয়েবকিট-উপস্থিতি: কিছুই নয়; ) তবে এটি ফায়ারফক্সের মতো অন্য ব্রাউজারগুলিতে কাজ করে না

— ড্যানিয়েলড

যদি আমি # 1 পদ্ধতির উন্নতির প্রস্তাব করতে পারি তবে আমি ব্যক্তিগতভাবে সীমানার অভাব বা ডান দিকের নির্বাচনের হলোর অভাবকে খুব বিরক্তিকর মনে করি। আমি আমার বর্তমান প্রকল্পে ব্যবহার করা কিছু দিয়ে আপনার ফিডল আপডেট করেছি: jsfiddle.net/YvCHW/1745 । আমাকে বল তুমি কি ভাবছ!

— অ্যালেক্সিস লেকলার

Answer 2

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

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* Fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

আপনি যখন ওয়েবকিট-ভিত্তিক ব্রাউজারের মধ্যে যে কোনও পৃষ্ঠায় এই কোডটি চালান তখন এটি নির্বাচিত বাক্সটির চেহারা পরিবর্তন করতে হবে, স্ট্যান্ডার্ড ওএস-তীরটি সরান এবং একটি পিএনজি-তীর যুক্ত করা উচিত, লেবেলের আগে এবং পরে কিছু ফাঁক করা, আপনার পছন্দসই কিছু।

সর্বাধিক গুরুত্বপূর্ণ অংশটি appearanceসম্পত্তি, যা উপাদানটি কীভাবে আচরণ করে তা পরিবর্তন করে।

এটি মোবাইলগুলি সহ প্রায় সমস্ত ওয়েবকিট-ভিত্তিক ব্রাউজারে পুরোপুরি কাজ করে, যদিও গেকো appearanceপাশাপাশি ওয়েবকিট সমর্থন করে না , মনে হয়।

Comments

আরে, আমি লক্ষ্য করেছি যে নির্বাচিত বাক্সগুলি ফায়ারফক্স 12 এর চেয়ে খুব আলাদা দেখতে শুরু করেছে (এটি ক্রোমের মতো অনেক বেশি দেখাচ্ছে (আমার কাছে একটি ম্যাক আছে)) এবং মনে হয় যে এফএফ 12 আরও একগুচ্ছ বৈশিষ্ট্যের সমর্থন করে।

— CWSpear

একটি ক্রোম-একমাত্র সমাধান ... আমি এটির জন্য বা আমার ক্লায়েন্টকে কোনও অর্থ দেব না। এক্স ব্রাউজার সমাধানের জন্য @ ডায়ানেল্ডের উত্তর দেখুন।

— অ্যাড্রিয়েন

@ অ্যাড্রিনবেন আমার সমাধানটি প্রায় 3 বছর আগে প্রস্তাব করা হয়েছিল; তখন জাভাস্ক্রিপ্টের লিব বা প্লাগইন জড়িত না করে নির্বাচিত বাক্সগুলিকে পুনরায় সাজানোর একমাত্র যুক্তিযুক্ত উপায় ছিল। আপনি যদি উপসর্গযুক্ত বৈশিষ্ট্যগুলি বাদ দেওয়ার সিদ্ধান্ত নেন তবে এটি এখনও কার্যকর হবে তবে এটি কেবল ওয়েবকিট-ভিত্তিক ব্রাউজারগুলিতে নির্ভরযোগ্যভাবে কাজ করে (সুতরাং সাফারি, নতুন অপেরা + অ্যান্ড্রয়েডও)। এই মুহুর্তে, সম্ভবত আরও ভাল সমাধান রয়েছে, সুতরাং অর্থহীন মন্তব্যগুলি যুক্ত করার পরিবর্তে, আপনি যে সমাধানটি আরও ভাল হিসাবে দেখছেন তার সমাধান করুন এবং ভবিষ্যতে "উত্তর দেওয়া" তারিখটি দেখুন। ধন্যবাদ।

— ম্যাথিউ মোরেক

@ ম্যাথিউমোরেক: আরও একটি ভাল সমাধান ছিল, এমনকি 3 বছর আগে। ড্যানিয়েলের উত্তর ক্রস-ব্রাউজার সমর্থন (এটি আই 8 এবং পরে, ওয়েবকিট এবং গেকো সমর্থন করে) সম্পর্কে আরও ভাল better প্রশ্নটি জিজ্ঞাসা করেছিল "কোডটি সমস্ত প্রধান ব্রাউজারের সাথে সুসংগত হওয়া দরকার: ইন্টারনেট এক্সপ্লোরার 6,7 এবং 8, ফায়ারফক্স এবং সাফারি"। এই এক্স-ব্রাউজারের আবশ্যকতাটি ২০১৩ সালে পল সুইট যুক্ত করেছিলেন যদিও ... যদি এটি হয় তবে দুঃখিত।

— এড্রিয়েন

আপনি যদি যোগ করেন তবে text-indent: 0.01px; text-overflow: "";এটি আরও ভাল কাজ করবে

— ইভান

Answer 3

নির্বাচন উপাদান এবং তার ড্রপডাউন বৈশিষ্ট্য হয় শৈলী কঠিন।

ক্রিস হিলম্যান কর্তৃক নির্বাচিত উপাদানগুলির জন্য শৈলীর বৈশিষ্ট্যগুলি প্রথম উত্তরের মন্তব্যে রায়ান দোহারি যা বলেছিল তা নিশ্চিত করে:

"নির্বাচিত উপাদানটি অপারেটিং সিস্টেমের একটি অংশ, ব্রাউজার ক্রোম নয় Therefore তাই এটি স্টাইলের পক্ষে খুব বিশ্বাসযোগ্য নয় এবং যাইহোক এটি চেষ্টা করার কোনও প্রয়োজন নেই" "

Answer 4

আমার এই সঠিক সমস্যাটি ছিল, আমি ছবিগুলি ব্যবহার করতে না পারতাম এবং ব্রাউজার সমর্থন দ্বারা সীমাবদ্ধ ছিল না। এটি "অনুমানের ভিত্তিতে" হওয়া উচিত এবং ভাগ্যের সাথে শেষ পর্যন্ত সর্বত্র কাজ শুরু করা উচিত ।

এটি একটি ড্রপডাউন তীরকে "কাটা" করতে স্তরযুক্ত ঘোরানো ব্যাকগ্রাউন্ড স্তর ব্যবহার করে, কারণ সিউডো-উপাদানগুলি নির্বাচিত উপাদানটির জন্য কাজ করে না।

সম্পাদনা করুন: এই আপডেট হওয়া সংস্করণে আমি সিএসএস ভেরিয়েবল এবং একটি ক্ষুদ্রতর থিমিং সিস্টেম ব্যবহার করছি।

:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}

<select>
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-pink">
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-construction">
  <option>So many options</option>
  <option>...</option>
</select>

Comments

বাহ, আমি দেখেছি এটি অন্যতম দুর্দান্ত সমাধান। এটি ম্যাকের ক্রোম এবং সাফারির সর্বশেষ সংস্করণগুলিতে আমার জন্য কাজ করে। অন্যান্য ব্রাউজারগুলি কেমন?

— Tintin81

ফায়ারফক্সে আমার জন্য কাজ করে-moz-appearance: none;

— জ্যাক

Answer 5

সিলেক্ট ড্রপডাউনগুলি স্টাইল করার সময় আমি যে বৃহত্তম অসঙ্গতি লক্ষ্য করেছি তা হ'ল সাফারি এবং গুগল ক্রোম রেন্ডারিং (সিএসএসের মাধ্যমে ফায়ারফক্স পুরোপুরি কাস্টমাইজযোগ্য)। ইন্টারনেটের অস্পষ্ট গভীরতার মধ্য দিয়ে কিছু অনুসন্ধান করার পরে আমি নিম্নলিখিতটি দেখতে পেয়েছি, যা ওয়েবকিতের সাথে আমার কোয়ালিটি প্রায় সম্পূর্ণ সমাধান করে:

সাফারি এবং গুগল ক্রোম ফিক্স :

select {
  -webkit-appearance: none;
}

এটি তবে ড্রপডাউন তীরটি সরিয়ে দেয় remove আপনি divনির্বাচিত ড্রপডাউনটির উপরে পটভূমি, নেতিবাচক মার্জিন সহ একেবারে অবস্থানযুক্ত বা ড্রপডাউন তীর যুক্ত করতে পারেন ।

* আরও তথ্য এবং অন্যান্য ভেরিয়েবল সিএসএস বৈশিষ্ট্যে উপলব্ধ : -উইবকিট-উপস্থিতি ।

Comments

তার পরে আপনার স্টাইলিং যুক্ত করতে ভুলবেন না;) তবে আমি আজ এই মন্তব্যটি পড়ে খুব আনন্দিত।

— teewuane

আপনি কি দয়া করে আপনার এই বক্তব্যটি বিস্তারিতভাবে বর্ণনা করতে পারেন: "ফায়ারফক্স সিএসএসের মাধ্যমে সম্পূর্ণরূপে কাস্টমাইজযোগ্য" আমার কাছে মনে হচ্ছে ফায়ার ফক্স উপস্থিত উপস্থিতি সমর্থন করে না ... সুতরাং এটি ফায়ার ফক্সে কীভাবে হবে?

— ড্যানিয়েল্ড

Answer 6

<select>ট্যাগগুলি ব্রাউজারে রেন্ডার করা কোনও HTML পৃষ্ঠায় অন্য কোনও এইচটিএমএল উপাদানগুলির মতোই সিএসএসের মাধ্যমে স্টাইল করা যায়। নীচে একটি (অত্যধিক সহজ) উদাহরণ যা পৃষ্ঠায় একটি নির্বাচিত উপাদান অবস্থান করবে এবং বিকল্পগুলির পাঠ্যকে নীল রঙে রেন্ডার করবে।

উদাহরণস্বরূপ এইচটিএমএল ফাইল (নির্বাচন করুন নমুনা। Html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

সিএসএস ফাইলের উদাহরণ (নির্বাচন করুন নমুনা সিএসএস):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

Comments

আশ্চর্যজনক, আমি প্রথমবার দেখেছি "মায়েরা" ইন্টারনেটে অসভ্য না হয়ে জড়িত। +1 তার জন্য!

— বেল

এই উত্তরটি এই প্রশ্নের সমাধান করে না। এটি কেবল স্টাইলগুলি ইনপুট নির্বাচন করে তবে ড্রপডাউন নয়

— কিবোরেক

এই উত্তরটি ক্রস ব্রাউজারের ধারাবাহিকতার জন্য ড্রপ ডাউন তালিকার স্টাইলিংয়ের চ্যালেঞ্জগুলিকে সম্পূর্ণ উপেক্ষা করে। এটি একটি খুব কম প্রচেষ্টা উত্তর।

— বেন্টঅনকোডিং 21

Answer 7

ব্লগ পোস্টটি কীভাবে সিএসএস ফর্ম ড্রপ ডাউন স্টাইলে কোনও জাভাস্ক্রিপ্ট আমার জন্য কাজ করে না তবে এটি অপেরাতে ব্যর্থ হয় :

select {
  border: 0 none;
  color: #FFFFFF;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Answer 8

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

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

Answer 9

আমি বুটস্ট্র্যাপ ব্যবহার করে আপনার মামলায় পৌঁছেছি । এটি সবচেয়ে সহজ সমাধান যা কাজ করে:

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1ex;
    background-origin: content-box;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <form class="form-horizontal">
    <select class="form-control">
      <option>One</option>
      <option>Two</option>
    </select>
  </form>
</section>

দ্রষ্টব্য: বেস 64 স্টাফগুলি এসভিজিতে রয়েছে fa-chevron-down।

Answer 10

আধুনিক ব্রাউজারগুলিতে এটি <select>CSS এ স্টাইল করা তুলনামূলকভাবে বেদাহীন । সঙ্গে appearance: noneশুধুমাত্র চতুর অংশ তীর প্রতিস্থাপন করা হয় (যদি আপনি যা চান তা যে)। এখানে এমন একটি সমাধান রয়েছে যা data:প্লেইন-পাঠ্য এসভিজির সাথে একটি ইনলাইন ইউআরআই ব্যবহার করে:

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  
  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.25em center;
  padding-right: 1em;
  
  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:black;'/> \
    </svg>");
}

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select style="font-size: 2rem;">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

স্টাইলিংয়ের বাকি অংশগুলি (সীমানা, প্যাডিং, রং ইত্যাদি) মোটামুটি সোজা।

আমি সবেমাত্র চেষ্টা করা সমস্ত ব্রাউজারগুলিতে এটি কাজ করে (ফায়ারফক্স 50, ক্রোম 55, এজ 38, এবং সাফারি 10) ফায়ারফক্স সম্পর্কে একটি দ্রষ্টব্য হ'ল আপনি যদি #ইউআরআই (যেমন fill: #000) ডেটাতে অক্ষরটি ব্যবহার করতে চান তবে আপনাকে এটি ( fill: %23000) এড়িয়ে চলতে হবে ।

Comments

আপনি এসএসজি আকারে সিএসএস সম্পত্তি পরিবর্তে ট্যাগটিতে heightএবং / অথবা widthবৈশিষ্ট্যযুক্ত করতে পারেন । <svg>background-size

— গীতারিক

Answer 11

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

Comments

বর্তমান ক্রোম দিয়ে এটি দিয়ে কোনওটি নির্বাচন করা যায় না।

— ভাইটালি জাদানেভিচ

Answer 12

clipসীমানা এবং selectউপাদানটির তীরটি কাটাতে সম্পত্তিটি ব্যবহার করুন , তারপরে মোড়কে আপনার নিজের প্রতিস্থাপনের শৈলী যুক্ত করুন:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
          body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select>
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

বোতামটি ক্লিকযোগ্য করে তুলতে শূন্য अस्पष्टতার সাথে একটি দ্বিতীয় নির্বাচন ব্যবহার করুন:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
    
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

ওয়েবকিট এবং অন্যান্য ব্রাউজারগুলির মধ্যে স্থানাঙ্কগুলি পৃথক, তবে একটি @ মিডিয়া ক্যোয়ারী এটি কভার করতে পারে।

তথ্যসূত্র

• ডোজো এফএক্স পরীক্ষা: dojox.fx.ext-dojo.complex
• সিএসএস মাস্কিং: রেট ফাংশন এবং সীমানা বাক্সে অটো মান ক্লিপ সহ পরীক্ষার ক্লিপ সম্পত্তি

Comments

কমপক্ষে আমার পক্ষে ভাল কাজ করা: অবস্থান: নিরঙ্কুশ; ক্লিপ: রেকট (2px 85px 128px 2px); জেড-ইনডেক্স: 2; প্যাডিং-বাম: 18px; প্যাডিং-ডান: 18px; মার্জিন: 7 পিক্স অটো; রঙ: # 555; হরফ-আকার: উত্তরাধিকারী; পটভূমি রঙ: স্বচ্ছ;

— ব্রায়ানফ্রেড

আমি নির্বাচিত সীমান্তের উপর আপনার কোনও নিয়ন্ত্রণ না থাকায় আমি আই 7 এ কেবলমাত্র অর্ধেক কাজ করে ফেলেছি।

— সিপিআইএলএল

সম্পর্কিত প্রশ্নের

— পল সুইট

@ পালসওয়েট, বাহ, এটি আপনার 20 তম নেক্রোমেন্সার ! অভিনন্দন. আপনি সোনার নেক্রোমেন্সার ব্যাজটির জন্য আমার সমস্ত প্রশ্নের উপরেও রয়েছেন ।

— নিমো

Answer 13

কাস্টম সিএসএস শৈলী নির্বাচন করুন

ইন্টারনেট এক্সপ্লোরার (10 এবং 11), এজ, ফায়ারফক্স এবং ক্রোমে পরীক্ষিত

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}

<select name="">
  <option value="">Lorem</option>
  <option value="">Lorem Ipsum</option>
</select>

<select name="" disabled>
  <option value="">Disabled</option>
</select>

<select name="" style="color:red;">
  <option value="">Color!</option>
  <option value="">Lorem Ipsum</option>
</select>

Comments

সামান্য আরও অভিযোজ্য (তবে সমস্ত ব্রাউজারে পরীক্ষা করা হয়নি):background-position: right 15px center, right 10px center;

— রবিন স্টুয়ার্ট

Answer 14

কৌশলটি ব্যবহার :afterএবং :beforeকরার জন্য একটি দুর্দান্ত উদাহরণ হ'ল CSS3 | সহ স্টাইলিং নির্বাচন বাক্সে CSSDeck

Comments

হ্যাঁ তবে প্রশ্নের প্রয়োজনে ইন্টারনেট এক্সপ্লোরার 6,7 এবং 8 এর সাথে সামঞ্জস্য করা উচিত

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

হ্যাঁ এটি আইয়ের সাথে সামঞ্জস্যপূর্ণ নয় তবে আমি যেমন খুঁজছিলাম তখন আধুনিক সমাধানের সন্ধানের জন্য যেকোনওকে ভাগ করে নিতে ভালোবাসি।

— আহমদ আজমি

Answer 15

এই উপাদানটি সম্পাদনা করার প্রস্তাব দেওয়া হয় না, তবে আপনি যদি চেষ্টা করতে চান তবে এটি অন্য কোনও HTML উপাদানগুলির মতো।

উদাহরণ সম্পাদনা করুন:

/* Edit select */
select {
    /* CSS style here */
}

/* Edit option */
option {
    /* CSS style here */
}

/* Edit selected option */
/* element  attr    attr value */
option[selected="selected"] {
    /* CSS style here */
}

<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>

Comments

@ মিককোপি: সম্পাদনাগুলির পরামর্শ দেওয়ার সময়, আপনি কি দয়া করে আরও বর্ণনামূলক সম্পাদনার সংক্ষিপ্তসার সরবরাহ করবেন? "পর্যালোচনাটি উন্নত করা" আমাদের পর্যালোচকদের জন্য উচ্চ-স্তরের সারাংশ হিসাবে খুব সহায়ক নয় helpful ধন্যবাদ।

— জিন-ফ্রান্সোইস কর্পেট

@ জিন-

— ফরাসোইস কর্বেট

: তুমি কি শৈলী বিকল্প উপাদান (এই এইরকম উত্তর দেন দেখতে পারেন stackoverflow.com/a/7208814/703717 )

— Danield

Answer 16

label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

এটি নির্বাচিত উপাদানগুলির জন্য একটি পটভূমির রঙ ব্যবহার করে এবং আমি চিত্রটি সরিয়েছি ..

Answer 17

হ্যাঁ. আপনি এইচটিএমএল উপাদানকে এর ট্যাগ নাম দিয়ে স্টাইল করতে পারেন:

select {
  font-weight: bold;
}

অবশ্যই, আপনি এটি স্টাইল করতে কোনও সিএসএস বর্গ ব্যবহার করতে পারেন, অন্য যে কোনও উপাদানগুলির মতো:

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

Comments

আমি এ জাতীয় কথা বলছি না আমি ড্রপডাউন

— তীরটিকে

আপনি অন্য ছবিতে ড্রপডাউন তীরটি স্টাইল করতে পারবেন না, এটি ওএস দ্বারা নিয়ন্ত্রিত। আপনার যদি সত্যিই প্রয়োজন হয় তবে আপনার সেরা বেটটি হ'ল ডিএইচটিএমএল ড্রপডাউন উইজেট ব্যবহার করা।

— রায়ান দোহার্টি

আপনি কেবল CSS এর মাধ্যমে CSS বৈশিষ্ট্য পরিবর্তন করতে পারবেন change আপনি এর মার্জিন, প্যাডিং, ফন্টের বৈশিষ্ট্য, ব্যাকগ্রাউন্ড-রঙ ইত্যাদি পরিবর্তন করতে পারেন যদি আপনি একে একে অন্যরকম দেখতে চান, তবে আপনাকে মূলত জাভাস্ক্রিপ্টের মাধ্যমে রানটাইমে গ্রাফিক্সের সাথে এটি প্রতিস্থাপন করতে হবে (এটি যদি ভালভাবে করা হয় তবে এটি কোনও ভয়ানক সমাধান নয়) )।

— ডেভ ওয়ার্ড

Answer 18

এই আলোচনা থেকে আমার প্রিয় ধারণার উপর ভিত্তি করে একটি সমাধান এখানে a এটি কোনও অতিরিক্ত মার্কআপ ছাড়াই সরাসরি <সিলেক্ট> উপাদান স্টাইলিংয়ের অনুমতি দেয়।

ইন্টারনেট এক্সপ্লোরার 8/9 এর নিরাপদ ফ্যালব্যাক সহ এটি ইন্টারনেট এক্সপ্লোরার 10 (এবং পরে) কাজ করে। এই ব্রাউজারগুলির জন্য একটি সতর্কতা হ'ল পটভূমি চিত্রটি অবশ্যই অবস্থানীয় হওয়া উচিত এবং দেশীয় প্রসারিত নিয়ন্ত্রণের পিছনে লুকানোর জন্য যথেষ্ট ছোট হওয়া উচিত।

এইচটিএমএল

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

CodePen

http://codepen.io/ralgh/pen/gpgbGx

Answer 19

ইন্টারনেট এক্সপ্লোরার 10 হিসাবে, আপনি ::-ms-expandছদ্ম উপাদান নির্বাচনকারীকে স্টাইল করতে এবং লুকিয়ে রাখতে, ড্রপ ডাউন তীর উপাদানটি ব্যবহার করতে পারেন ।

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

বাকি স্টাইলিং অন্যান্য ব্রাউজারগুলির মতো হওয়া উচিত।

এখানে ড্যানিয়েল্ডের জিসফিলার একটি প্রাথমিক কাঁটা রয়েছে যা আই 10 এর জন্য সমর্থন প্রয়োগ করে

Answer 20

একটি সহজ উপায় আছে।

এই ভাঁড়টি দেখুন, এবং আমাকে অত্যধিক স্টাইলিং ক্ষমা করুন: https://jsfiddle.net/dkellner/7ac9us70/

পেছনের কৌশল: <সিলেক্ট> ট্যাগটি "আকার" নামে একটি সম্পত্তি পাওয়ার সাথে সাথেই এটি একটি নির্দিষ্ট-উচ্চতার তালিকা হিসাবে আচরণ করবে এবং হঠাৎ করে কোনও কারণে আপনাকে এটিকে বের করে আনতে অনুমতি দেবে। এখন কঠোরভাবে বলতে গেলে, নির্দিষ্ট তালিকাটি একটি পার্শ্ব প্রতিক্রিয়া - তবে এটি আমাদের আরও সাহায্য করে কারণ আমরা এটি "ড্রপ-ডাউন চেহারা" জন্য ব্যবহার করি।

একটি সর্বনিম্ন উদাহরণ:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)"><br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(এটিকে সহজ রাখতে আমি jQuery দিয়ে করেছি - তবে আপনি এটি ছাড়া এটিও করতে পারেন)

পার্শ্ব নোট

• এই সমাধানটি আপনাকে কেবল একটি নির্বাচনের চেয়ে বেশি দেয়: মানটি নিজেও সম্পাদনাযোগ্য। আপনি যদি ডিফল্ট নির্বাচন-সীমাবদ্ধ উপায় পছন্দ করেন তবে পঠনযোগ্য সম্পত্তিটি ব্যবহার করুন।

• স্টাইলিংয়ের সম্ভাব্যতা সর্বাধিক করতে, <optgroup> ট্যাগগুলি তাদের বাচ্চাদের চারপাশে থাকে না , তারা তাদের আগে স্থানান্তরিত হয় । এটি উদ্দেশ্যমূলক, এটি চাক্ষুষরূপে পরিষ্কার, এবং তারা এই জাতীয় কাজ করে খুশি, চিন্তা করবেন না।

• জাভাস্ক্রিপ্টস: হ্যাঁ আমি জানি ওপি "জাভাস্ক্রিপ্ট নেই" বলেছে তবে প্লাগিনগুলি নিয়ে বিরক্ত করবেন না বলে আমি এটি বুঝতে পেরেছি , যা ভাল। আপনার এটির জন্য কোনও গ্রন্থাগার দরকার নেই। এমনকি jQuery নয়, যেমনটি আমি বলেছি, এটি কেবল উদাহরণের স্পষ্টতার জন্য।

Answer 21

স্টিলিং নির্বাচন, অপ্টগ্রুপ এবং সিএসএস সহ বিকল্পগুলির মতো আপনার অবশ্যই এটি করা উচিত । বিভিন্ন উপায়ে, ব্যাকগ্রাউন্ড-রঙ এবং রঙ এমনটি যা সাধারণত আপনার পছন্দ মতো স্টাইল বিকল্পগুলির প্রয়োজন হয়।

Answer 22

আপনি ড্রপডাউনতে হোভার স্টাইলও যুক্ত করতে পারেন।

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}

<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

Answer 23

ড্যানিয়েল্ডের উত্তরের তৃতীয় পদ্ধতিটি হোভার-ইফেক্ট এবং অন্যান্য মাউস ইভেন্টগুলির সাথে কাজ করতে উন্নত করা যেতে পারে। কেবল নিশ্চিত হয়ে নিন যে "বাটন" -লিমেন্টটি মার্কআপে নির্বাচনের উপাদানগুলির ঠিক পরে আসে। তারপরে এটি + সিএসএস নির্বাচক ব্যবহার করে লক্ষ্য করুন:

এইচটিএমএল:

<select class="select-input">...</select>
<div class="select-button"></div>

সিএসএস:

.select-input:hover+.select-button {
    <Hover styles here>
}

এটি কেবলমাত্র "বোতাম" দিয়ে নয়, নির্বাচন-উপাদানটির উপর যে কোনও জায়গায় ঘোরাফেরা করার পরে হোভার প্রভাবটি প্রদর্শন করবে।

পুরো সিলেক্ট-এলিমেন্টটি কভার করতে, এবং কৌনিকটি "বাটন" -লিমিটে নির্বাচিত বিকল্পের পাঠ্যটি প্রদর্শন করতে, আমি কৌনিকটির সাথে এই পদ্ধতিটি ব্যবহার করছি (যেহেতু আমার প্রকল্পটি যাইহোক কোনও কৌনিক অ্যাপ্লিকেশন হিসাবে ঘটে)) এই ক্ষেত্রে এটি নিখুঁতভাবে বোঝায় যে বাছাইয়ের যে কোনও জায়গায় ঘুরে বেড়ানোর সময় হোভার-ইফেক্টটি প্রযোজ্য।

এটি যদিও জাভাস্ক্রিপ্ট ব্যতীত কাজ করে না, সুতরাং আপনি যদি এটি করতে চান এবং আপনার সাইটটিকে জাভাস্ক্রিপ্ট ছাড়াই কাজ করতে হয় তবে আপনার স্ক্রিপ্টটি বর্ধনের জন্য প্রয়োজনীয় উপাদান এবং শ্রেণি যুক্ত করেছে তা নিশ্চিত করা উচিত। এইভাবে, জাভাস্ক্রিপ্টবিহীন ব্রাউজারটি স্টাইলযুক্ত ব্যাজ পরিবর্তে একটি সাধারণ, আনস্টাইলযুক্ত নির্বাচন করবে যা সঠিকভাবে আপডেট হয় না।

Comments

আমি কোনও ডাউনভোটের কারণ জানতে আগ্রহী তাই আমি কীভাবে উন্নতি করতে পারি তা জানতে পারি! 🙂

— অ্যাড্রিয়ান

Answer 24

একটি সিএসএস এবং এইচটিএমএল কেবলমাত্র সমাধান

এটি ক্রোম, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার 11 এর সাথে সামঞ্জস্যপূর্ণ বলে মনে হচ্ছে তবে দয়া করে অন্যান্য ওয়েব ব্রাউজারগুলির বিষয়ে আপনার মতামতটি দিন।

ড্যানিয়েল্ডের উত্তরের পরামর্শ অনুসারে , প্রত্যাশিত আচরণ পেতে আমি আমার সিলেক্ট একটি ডিভিতে (এক্স ব্রাউজারের সামঞ্জস্যের জন্য দুটি ডিভ এমনকি) গুটিয়ে রাখি ।

Http://jsfiddle.net/bjap2/ দেখুন

এইচটিএমএল:

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

দুটি ডিভ র‍্যাপারগুলি লক্ষ্য করুন।

আপনার পছন্দ মতো যেখানেই (নিখুঁতভাবে অবস্থিত) তীর-ডাউন বোতামটি যুক্ত করার জন্য অতিরিক্ত ডিভ যুক্ত করা লক্ষ্য করুন, এখানে আমরা এটি বামে রেখেছি।

সিএসএস

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837F;
}

/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}

select {
    margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}

select:focus {
    outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height: 10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}