এইচটিএমএল "নির্বাচন করুন" উপাদানটির বিকল্পটি কীভাবে স্টাইল করবেন?

Question

এখানে আমার এইচটিএমএল:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

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

Comments

এই একটি বিষয়ে নিশ্চিত না। আমি মনে করি না। এটি হওয়ার জন্য আপনার কিছু জাভাস্ক্রিপ্ট (jQuery) যাদু প্রয়োজন।

— মাদারার ঘোস্ট

বিকল্পগুলি এখনও স্টাইলের মতোই বিরক্তিকর। আপনি যা ব্যবহার করতে চাইতে পারেন তা হ'ল একটি অপ্টগ্রুপ: htmlhelp.com/references/html40/forms/optgroup.html এটি আপনাকে একটি সাহসী এবং ইতর শ্রেণীবদ্ধ (যেমন ইলেক্ট্রনিক্স) বিভাগ দেয় যার অধীনে বিকল্পগুলির একগুচ্ছ পতন ঘটে।

— wolv2012

Answer 1

কেবলমাত্র কয়েকটি স্টাইল অ্যাট্রিবিউট রয়েছে যা কোনও <option>উপাদানকে প্রয়োগ করা যেতে পারে ।

কারণ এই ধরণের উপাদানটি "প্রতিস্থাপিত উপাদান" এর উদাহরণ। এগুলি ওএস-নির্ভরশীল এবং এইচটিএমএল / ব্রাউজারের অংশ নয়। এটি মাধ্যমে স্টাইল করা যাবে না CSS।

সেখানে প্রতিস্থাপন প্ল্যাগ-ইনগুলি / লাইব্রেরি করে একটি মত চেহারা হয় <select>কিন্তু আসলে নিয়মিত দ্বারা গঠিত HTMLযে উপাদান পারি স্টাইল হবে না।

Comments

এই আচরণটি বিভিন্ন ব্রাউজার এবং বিভিন্ন ওএসে পরিবর্তিত হয়; আপনি উইন্ডোজে মূলত আইই সম্পর্কে কথা বলছেন কিনা তা স্পষ্ট করার মতো worth

— ভিন্স বাউডরেন

আপনি স্টাইল করতে পারেন select > option, তবে এটি করার জন্য কোনও নির্ভরযোগ্য ক্রসব্রোজার সমাধান নেই এবং Chrome এ কমপক্ষে আপনি সর্বাধিক সর্বাধিক ফন্টের আকার, পরিবার, পটভূমি এবং অগ্রভূমির রঙ কাস্টমাইজ করতে পারেন। হয়তো আরও কিছু টুইট, কিন্তু প্যাডিং, হোভার রঙ এবং এই জাতীয় জিনিসগুলি আমি পরিবর্তন করতে সফল হতে পারিনি। প্রকৃতপক্ষে বিকল্পগুলি থাকতে পারে, তবে প্রকল্পের উপর নির্ভর করে কৌণিক বৈধতা বা অন্য কোনও কারণে উদাহরণের জন্য <নির্বাচন> ট্যাগটি প্রয়োজনীয় হতে পারে।

— ফ্লিপ

স্টাইলিং অপশন ট্যাগগুলিতে আমি উত্তর পোস্ট করেছি নি কেউই নয় । এটি কীভাবে স্টাইল করবেন তা দেখায় না <option>, তবে এটি কীভাবে অনুকরণ করতে হয় তা দেখায় <select>যাতে আপনি বিকল্পগুলি স্টাইল করতে পারেন।

— UndoingTech

যদিও এটি গৃহীত উত্তর, তবে OPTIONআধুনিক ব্রাউজারগুলির সাথে সিএসএস দিয়ে স্টাইল করা সম্ভব - বিকল্পটিতে একটি স্টাইল ট্যাগ যুক্ত করুন

— জিম্মি

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

— অবাক

Answer 2

না, এটি সম্ভব নয়, কারণ এই উপাদানগুলির স্টাইলিংটি ব্যবহারকারীর ওএস দ্বারা পরিচালিত হয়। এমএসডিএন আপনার প্রশ্নের উত্তর এখানে দেবে :

background-colorএবং বাদে color, বিকল্প উপাদানটির জন্য স্টাইল অবজেক্টের মাধ্যমে প্রয়োগ করা স্টাইল সেটিংস উপেক্ষা করা হয়।

Comments

সুতরাং উপসংহারটি হল: "একটি নির্বাচনের বিকল্পটি কেবলমাত্র সিএসএস দিয়ে আংশিকভাবে স্টাইল করা যায় না", ঠিক ??? :(

— মিঃক্লান

এখানে গুরুত্বপূর্ণ বিষয়টি হ'ল এগুলি স্টাইল করা যেতে পারে, কেবলমাত্র খুব ন্যূনতম।

— ডিভাইস 1

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

— বেনিয়ামিন রবিনসন

<অপশন স্টাইল = "রঙ: 'লাল';"> আমার পক্ষে কাজ করে না ... পরামর্শ?

— ফিবিও

style="background-color: red;color: red;"আমার জন্য কাজ করে না। সম্পাদনা: বিকাশকারী কনসোল বন্ধ করার পরে শৈলী প্রয়োগ করা হয়েছিল।

— কালো

Answer 3

আপনি কিছু পরিমাণে বিকল্প উপাদানগুলি স্টাইল করতে পারেন।

* সিএসএস ট্যাগ ব্যবহার করে আপনি সিস্টেমের দ্বারা আঁকানো বাক্সের ভিতরে থাকা বিকল্পগুলি স্টাইল করতে পারেন।

উদাহরণ:

#ddlProducts *
{
 border-radius:15px;
 background-color:red;
}

এটি এর মতো দেখাবে:

Comments

এটি কেবল সত্য, কারণ সমস্ত নির্বাচক ছায়া ডিওএম অভ্যন্তরের দিকে লক্ষ্য রাখে, আপনি ব্রাউজারে ম্যানুয়ালি সেইগুলিকে লক্ষ্য করতে পারেন।

— mystrdat

Answer 4

নির্বাচিত এবং বিকল্পগুলির স্টাইলিংয়ের এই উত্তম উদাহরণটি আমি খুঁজে পেয়েছি এবং ব্যবহার করেছি you আপনি যা চান তা নির্বাচন করে আপনি এটি করতে পারেন e

এইচটিএমএল

<select id="selectbox1">
    <option value="">Select an option&hellip;</option>
    <option value="aye">Aye</option>
    <option value="eh">Eh</option>
    <option value="ooh">Ooh</option>
    <option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
    <option value="">Month&hellip;</option>
    <option value="january">January</option>
    <option value="february">February</option>
    <option value="march">March</option>
    <option value="april">April</option>
    <option value="may">May</option>
    <option value="june">June</option>
    <option value="july">July</option>
    <option value="august">August</option>
    <option value="september">September</option>
    <option value="october">October</option>
    <option value="november">November</option>
    <option value="december">December</option>
</select>

CSS

body {
    padding:50px;
    background-color:white;
}
.s-hidden {
    visibility:hidden;
    padding-right:10px;
}
.select {
    cursor:pointer;
    display:inline-block;
    position:relative;
    font:normal 11px/22px Arial, Sans-Serif;
    color:black;
    border:1px solid #ccc;
}
.styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:white;
    padding:0 10px;
    font-weight:bold;
}
.styledSelect:after {
    content:"";
    width:0;
    height:0;
    border:5px solid transparent;
    border-color:black transparent transparent transparent;
    position:absolute;
    top:9px;
    right:6px;
}
.styledSelect:active, .styledSelect.active {
    background-color:#eee;
}
.options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0 0;
    padding:0 0;
    list-style:none;
    border:1px solid #ccc;
    background-color:white;
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
    padding:0 6px;
    margin:0 0;
    padding:0 10px;
}
.options li:hover {
    background-color:#39f;
    color:white;
}

জাতীয়

// Iterate over each select element
$('select').each(function () {

    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;

    // Hides the select element
    $this.addClass('s-hidden');

    // Wrap the select element in a div
    $this.wrap('<div class="select"></div>');

    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');

    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');

    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());

    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    // Cache the list items
    var $listItems = $list.children('li');

    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $styledSelect.click(function (e) {
        e.stopPropagation();
        $('div.styledSelect.active').each(function () {
            $(this).removeClass('active').next('ul.options').hide();
        });
        $(this).toggleClass('active').next('ul.options').toggle();
    });

    // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
    // Updates the select element to have the value of the equivalent option
    $listItems.click(function (e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        /* alert($this.val()); Uncomment this for demonstration! */
    });

    // Hides the unordered list when clicking outside of it
    $(document).click(function () {
        $styledSelect.removeClass('active');
        $list.hide();
    });

});

Comments

আপনি কি দয়া করে কোডটি এখানে পোস্ট করতে পারেন কারণ সম্ভবত কোনও দিন এটি অপসারণ করা হবে তবে এখানে এটি সংরক্ষণের জায়গায় থাকবে

— মোহাম্মদ আলাবেদ

এরকম আমি আপনি নির্বাচন সঙ্গে চান এখানে @ahnbizcad একটি উত্তর হিসাবে এটি দেখতে খুশি হবে যদি আপনি একটি ভাল বিকল্প আসবে খুব গতিশীল উপায়

— Anahit DEV

এটি কোনও নেটিভ এইচটিএমএল নয় << নির্বাচন> এটি কিছু কিছু jQuery কোড দিয়ে কেবল পুনরায় রেন্ডার করে। যদি আপনার এই কাজটি করতে পারে তবে আপনি কোনও জিকুয়েরি প্লাগইন, প্রতিক্রিয়া উপাদান ইত্যাদি ব্যবহার করতে পারেন যা কীবোর্ড ইউপি / ডাউন,

— টাইপহেড

Answer 5

আপনি যদি বুটস্ট্র্যাপ এবং / অথবা jquery ব্যবহার <option>করেন <select>তবে এর সাথে স্টাইল করার কিছু উপায় এখানে রয়েছে । আমি বুঝতে পারি যে এটির মূল পোস্টারটি যা জিজ্ঞাসা করছে তা নয় তবে আমি ভেবেছিলাম যে এই প্রশ্নটিতে হোঁচট খেয়ে আমি অন্যদের সাহায্য করতে পারি।

আপনি এখনও প্রতিটি <option>পৃথক স্টাইলিংয়ের লক্ষ্য অর্জন করতে পারেন , তবে <select>পাশাপাশি কিছু স্টাইল প্রয়োগ করার প্রয়োজন হতে পারে । আমার প্রিয় নীচে উল্লিখিত "বুটস্ট্র্যাপ নির্বাচন করুন" লাইব্রেরি।

---

বুটস্ট্র্যাপ সিলেক্ট লাইব্রেরি (jquery)

আপনি যদি ইতিমধ্যে বুটস্ট্র্যাপ ব্যবহার করে থাকেন তবে বুটস্ট্র্যাপ নির্বাচন লাইব্রেরি বা নীচের লাইব্রেরিটি চেষ্টা করতে পারেন (যেহেতু এটিতে বুটস্ট্র্যাপ থিম রয়েছে) has

নোট করুন যে আপনি সম্পূর্ণ selectউপাদানটি বা optionউপাদানগুলিকে আলাদাভাবে স্টাইল করতে সক্ষম ।

উদাহরণ :

নির্ভরতা : jQuery v1.9.1 +, বুটস্ট্র্যাপ প্রয়োজন , বুটস্ট্র্যাপের ড্রপডাউন.জেএস উপাদান এবং বুটস্ট্র্যাপের সিএসএস দরকার

সামঞ্জস্যতা : অনিশ্চিত, তবে বুটস্ট্র্যাপ বলছে এটি "সমস্ত বড় ব্রাউজার এবং প্ল্যাটফর্মের সর্বশেষ, স্থিতিশীল প্রকাশকে সমর্থন করে"

ডেমো : https : //developer.snapapp অ্যাপয়েন্টমেন্ট ments.com/bootstrap-select/example/

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

---

সিলেক্ট 2 (জেএস লাইব)

এখানে একটি লাইব্রেরি রয়েছে যা আপনি সিলেক্ট 2 নামে ব্যবহার করতে পারেন ।

নির্ভরতা : লাইব্রেরিটি কেবল জেএস + সিএসএস + এইচটিএমএল (জিকুয়ের প্রয়োজন হয় না)।

সঙ্গতি : IE 8+, ক্রোম 8+, ফায়ারফক্স 10+, সাফারি 3+, অপেরা 10.6+

ডেমো : https://select2.org/getting-started/basic-usage

একটি বুটস্ট্র্যাপ থিমও রয়েছে উপলব্ধ।

বুটস্ট্র্যাপের কোনও উদাহরণ নেই:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

বুটস্ট্র্যাপ উদাহরণ:

$(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

---

এমডি বুটস্ট্র্যাপ ($ এবং বুটস্ট্র্যাপ এবং জিকুয়েরি)

আপনার যদি অতিরিক্ত অর্থ থাকে তবে আপনি একটি প্রিমিয়াম লাইব্রেরি MDBootstrap ব্যবহার করতে পারেন । (এটি পুরো ইউআই কিট , সুতরাং এটি হালকা নয়)

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

একটি নিখরচায় সংস্করণ রয়েছে তবে এটি আপনাকে সুন্দর উপাদানের নকশা ব্যবহার করতে দেয় না!

নির্ভরতা : বুটস্ট্র্যাপ 4 , জ্যাকুয়ারি,

সামঞ্জস্যতা : "সমস্ত বড় ব্রাউজার এবং প্ল্যাটফর্মের সর্বশেষ, স্থিতিশীল রিলিজ সমর্থন করে।"

ডেমো : https://mdbootstrap.com/docs/jquery/forms/select/#color

Comments

কারণ প্রশ্নটি বিকল্প উপাদানকে স্টাইলিং করা সম্পর্কে নির্বাচন করা উপাদান নয়।

— জেসালিনাস

এই উত্তরটি বিভ্রান্তিমূলক, কারণ আপনি স্পষ্টভাবে দেখিয়েছেন যে আপনি নির্বাচনকে স্টাইল করতে পারবেন , আপনি দাবি করেছেন যে বিকল্পটি স্টাইল করা যেতে পারে, যদিও এটি কোনও ওএস উপাদান যা কেবলমাত্র ন্যূনতম সিএসএস স্টাইলিংকেই গ্রহণ করে।

— অ্যান্ড্রু গ্রে

@ জালিনাস দুঃখিত, আমার আগের উত্তরটি অত্যাচারী ছিল। আমি এটির সাথে প্রতিস্থাপন করেছি যেটি আশা করি আরও ভাল।

— কেটি

দুর্দান্ত উত্তর! ভাল উদাহরণ!

— cskwg

ইলেক্ট্রনিকেশন ২.০ এখন আর খাঁটি নয় কারণ এটি এখন jQuery এর উপর নির্ভর করে।

— গ্যালামোক

Answer 6

দেখে মনে হচ্ছে আমি selectসরাসরি ক্রোমে সিএসএস সেট করতে পারি । সিএসএস এবং এইচটিএমএল কোড নীচে সরবরাহ করা হয়েছে:

.boldoption {
	font-weight: bold;
}

<select>
	<option>Some normal-font option</option>
	<option>Another normal-font option</option>
	<option class="boldoption">Some bold option</option>
</select>

Comments

@ মুহম্মদ আল খলিল: আমি আরও উদাহরণস্বরূপ উদাহরণটি আপডেট করেছি কারণ বর্তমানে নির্বাচিত বিকল্পটির নিজস্ব স্টাইলও রয়েছে। যদি এটি কাজ না করে, তবে আমি ব্রাউজারের সামঞ্জস্যের সমস্যাগুলি সন্দেহ করি। = \

— হোল্ডঅফহাঙ্গার

@ আকাশ: মজার বিষয়, এটি ফায়ারফক্সের কোয়ান্টাম প্রকাশের আগে ফায়ারফক্সে কাজ করেছিল এবং এটি বর্তমানে ক্রোমে (%০% ব্যবহারকারীদের) কাজ করে। আমি বাজি ধরছি এটি একটি বাগ!

— হোল্ডঅফহাঙ্গার

এটি কেবল ড্রপ ডাউনের জন্য কাজ করে, যা নির্বাচিত হিসাবে প্রদর্শিত হয় তা নয়। খুব খারাপ.

— ওয়েবডুড0482

Answer 7

ইতিমধ্যে উল্লিখিত হিসাবে, একমাত্র উপায় হ'ল একটি প্লাগইন ব্যবহার করা যা <select>কার্যকারিতা প্রতিস্থাপন করে।

JQuery প্লাগইনগুলির একটি তালিকা: http://plugins.jquery.com/tag/select/

Select2প্লাগইন ব্যবহার করে উদাহরণটি একবার দেখুন : http://jsfiddle.net/swsLokfj/23/

Comments

বর্তমান jQuery সিলেক্ট 2 4.x এ করার উপায় এখন আলাদা। দেখুন: উদাহরণস্বরূপ , দস্তাবেজগুলি ।

— ট্যানিয়াস

Answer 8

বুটস্ট্র্যাপ আপনাকে ডেটা-সামগ্রীর মাধ্যমে স্টাইলিং ব্যবহার করতে দেয়:

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

উদাহরণ: https://silviomoreto.github.io/bootstrap-select/example/

Comments

এইচটিএমএল ডেটা অ্যাট্রিবিউটগুলিতে এম্বেড করা আমাকে সত্যিকার অর্গল মনে করে।

— বেন হুল

Answer 9

কিছু বৈশিষ্ট্য <option>ট্যাগ জন্য স্টাইল করা যেতে পারে :

• font-family
• color
• font-*
• background-color

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

এটি বিবেচনা করে, আপনি ফন্ট-পারিবারিক স্ট্যাক তৈরি করতে এবং <option>ট্যাগগুলিতে আইকন সন্নিবেশ করতে পারেন , যেমন।

    <select>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">a    ★★★</option>
        <option style="font-family: 'Icons', 'Roboto', sans-serif;">b    ★★★★</option>
    </select>

কোথা ★থেকে নেওয়া হয়েছে Iconsএবং বাকীটি কোথা থেকে এসেছেRoboto ।

নোট করুন যদিও কাস্টম ফন্টগুলি মোবাইল নির্বাচনের জন্য কাজ করে না।

Comments

<অপশন স্টাইল = "রঙ: 'লাল';"> আমার পক্ষে কাজ করে না ... পরামর্শ?

— ফিবিও

red

— উপরের

Answer 10

আসলে আপনি যোগ করতে পারেন: আগে এবং: পরে এবং স্টাইল করতে পারেন। অন্তত এটি কিছু

option{
    font-size:18px;
    background-color:#ffffff;
}
option:before{
    content: ">";
    font-size:20px;
    display:none;
    padding-right:10px;
    padding-left:5px;
    color:#fff;
}
option:hover:before{
    display:inline;
}

Answer 11

এটি 2017 এবং নির্দিষ্ট নির্বাচন বিকল্পগুলি লক্ষ্য করা সম্ভব। আমার প্রকল্পে আমার ক্লাস = "বৈচিত্রগুলি" সহ একটি টেবিল রয়েছে এবং নির্বাচনের বিকল্পগুলি টেবিলের ঘরে রয়েছে td = "মান" , এবং নির্বাচনের একটি আইডি নির্বাচন করুন # pa_color । বিকল্প উপাদানটির একটি শ্রেণি বিকল্প = "সংযুক্ত" (অন্যান্য শ্রেণীর ট্যাগগুলির মধ্যে) রয়েছে। কোনও ব্যবহারকারী যদি একজন পাইকারি গ্রাহক হিসাবে লগ ইন করেন তবে তারা সমস্ত রঙের বিকল্প দেখতে পাবেন। তবে খুচরা গ্রাহকদের 2 টি রঙিন বিকল্প কেনার অনুমতি নেই, তাই আমি সেগুলি অক্ষম করে দিয়েছি

<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>

এটি একটি সামান্য যুক্তি নিয়েছে, তবে এখানে আমি অক্ষম নির্বাচনের বিকল্পগুলি কীভাবে লক্ষ্যবস্তু করেছি।

সিএসএস

table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}

এটির সাথে আমার রঙের বিকল্পগুলি কেবলমাত্র ক্রেতাদের কাছে দৃশ্যমান।

Answer 12

টেবিলের ক্লাস টগল ব্যবহার করে এখানে একটি দ্রুত বিকল্প ছেড়ে যাওয়া। আচরণটি একটি নির্বাচনের তুলনায় খুব সমান, তবে প্রতিটি শিশুকে আলাদা আলাদাভাবে রূপান্তর, ফিল্টার এবং রঙ দিয়ে স্টাইল করা যায়।

function toggleSelect(){ 
 if (store.classList[0] === "hidden"){
    store.classList = "viewfull"
  }
  else {
    store.classList = "hidden"
  }
}

#store {
  overflow-y: scroll;
  max-height: 110px;
  max-width: 50%
 }
 
.hidden {
  display: none
 }
 
.viewfull {
  display: block
}

#store :nth-child(4) {
  background-color: lime;
}

span {font-size:2rem;cursor:pointer}

<span onclick="toggleSelect()">⮋</span>
 <div id="store" class="hidden">
 
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>
 
 </div>

Answer 13

আপনি এতে গ্রাহক স্টাইলিং যুক্ত করতে ইনলাইন স্টাইল ব্যবহার করতে পারেন <option> ।

উদাহরণস্বরূপ: <option style="font-weight:bold;color:#09C;">Option 1</option> এটি শৈলীর এই বিশেষটিতে প্রয়োগ করবে<option> উপাদানটিতে ।

তারপরে আপনি <option>কোনও <select>ট্যাগের মধ্যে থাকা সমস্ত উপাদানগুলিতে ইনলাইন স্টাইল প্রয়োগ করতে জাভাস্ক্রিপ্টের কিছুটা যাদু ব্যবহার করতে পারেন :

var select = $(document).getElementById('#select-element-id')

var option = select.children('#option-element-id')

option.css('font-weight', 'bold')

option.css('font-size', '24px')

আপনি <option value="" disabled> <br> </option>বিকল্পগুলির মধ্যে একটি লাইন-ব্রেক যুক্ত করতেও ব্যবহার করতে পারেন।

Answer 14

এই উপাদানটি এইচটিএমএল নয়, ওএস দ্বারা রেন্ডার হয়েছে। এটি CSS এর মাধ্যমে স্টাইল করা যায় না।

	$(function() {
    var clicky;
    var t=0;
    $(document).mousedown(function(e) {
        clicky = $(e.target);
    });
    $(document).mouseup(function(e) {
        clicky = null;
    });

    $("select").focusout(function(e) {
        if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
        	$(this).parents().children("span.selected").html(clicky.html());
        	$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
		}
        
        $(this).parents().children("span.lists").html('');
        

    });
    $('select > option').text(function(i, text) {
				var attr = $(this).attr('selected');
				if (typeof attr !== typeof undefined && attr !== false) {
        				$(this).parents().parents().children("span.selected").html(text);
				}
	});

		$("select").focusin(function(){
			$(this).children('option').text(function(i, text) {
    			$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
				});
		});

	});

select {
  width: 0px;
  height: 0px;
  overflow:hidden;
  outline: none;
  border: none;
  appearance:none;
  -moz-appearance: none;

}
label{
	display: inline-block;
	padding: 5px 10px;
	position: relative;
	width: 100px;
	height: 20px;
	background-color:#ccc;

}
label .selected{
	display: inline-block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
label span.lists{
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	box-shadow: 0px 0px 2px 0px #ccc;
	background-color:#fff;
	z-index: 9;
}
label span.item{
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #ccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form action="?" method="GET">
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2" selected>item 2</option>
		<option value="3">item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test2">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2">item 2</option>
		<option value="3" selected>item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<button>Submit</button>
</form>

</body>
</html>

এটি আপনাকে সাহায্য করতে পারে চেষ্টা করুন

[ https://codepen.io/venu9l/pen/jeNXzY][1]

Answer 15

আপনি একটি ক্লাস যুক্ত করতে পারেন এবং ফন্ট-ওজন দেয়: 700; বিকল্পে। তবে এটি ব্যবহার করে সমস্ত পাঠ্য সাহসী হয়ে উঠবে।

Answer 16

এটা অবশ্যই কাজ করবে। নির্বাচন বিকল্পটি এইচটিএমএল দ্বারা নয় ওএস দ্বারা রেন্ডার করা হয় । এই কারণেই সিএসএস শৈলী কার্যকর হয় না, .. option{font-size : value ; background-color:colorCode; border-radius:value; }
এটি কাজ করবে তবে আমরা প্যাডিং, মার্জিন ইত্যাদি কাস্টমাইজ করতে পারি না ..

কোডের নীচে 100% এই উদাহরণ থেকে নেওয়া নির্বাচন পছন্দ করুন work

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 1; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
  });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
    <option value="6">Jaguar</option>
    <option value="7">Land Rover</option>
    <option value="8">Mercedes</option>
    <option value="9">Mini</option>
    <option value="10">Nissan</option>
    <option value="11">Toyota</option>
    <option value="12">Volvo</option>
  </select>
</div>

Comments

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

— সানুন ןɐ কিউপি

এই কোড সোজা থেকে w2schools হয় w3schools.com/howto/tryit.asp?filename=tryhow_custom_select

— devpato

Answer 17

পরিবর্তনের মতো খুব বেশি বৈশিষ্ট্য না থাকলেও আপনি কেবল সিএসএস দিয়ে নিম্নলিখিত শৈলীটি অর্জন করতে পারেন:

এইচটিএমএল:

<div class="options">
    <select>
        <option value="">Apple</option>
        <option value="">Banana</option>
        <option value="">Orange</option>
        <option value="">Mango</option>
    </select>
</div>

সিএসএস:

.options {

    border: 1px solid #e5e5e5;
    padding: 10px;

    select {
        font-size: 14px;
        border: none;
        width: 100%;
        background: white;
    }
}