নির্বাচন বাক্স বিকল্পের পটভূমির রঙ পরিবর্তন করুন

Question

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

ফিডল দেখুন

এইচটিএমএল:

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

সিএসএস:

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

Answer 1

আপনি ট্যাগ লাগাতে background-colorহবে, optionট্যাগ নয় select...

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

আপনি যদি প্রতিটি optionট্যাগকে স্টাইল করতে চান .. সিএসএস attributeনির্বাচকটি ব্যবহার করুন :

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}

<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

Comments

আমি আরজিবিএ অপশনটি সরিয়ে নিয়েছি এবং এখন কালো ব্যবহার করা হচ্ছে বলে মনে হচ্ছে যা করবে :)

— এনজিপ্লেগ্রাউন্ড

:nth-child(1..n)পরিবর্তে আপনি সিএসএস নির্বাচক ব্যবহার করতে পারেন ।

— স্যামুয়েল লিউ

আপনার সম্ভবত বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করা উচিত নয়। আপনি সম্ভবত এন-থ-চাইল্ডটি ব্যবহার করতে চান বা তার পরিবর্তে প্রতিটি বিকল্পকে একটি শ্রেণি দিতে চান।

— ফ্রেড

ফায়ারফক্সে কাজ করছে না, ক্রোমিয়ামে (লিনাক্স অ্যান্টারগোস)

— অ্যালবার্ট

যোগ করার চেষ্টা করুন !imporant। উদাহরণস্বরূপ:background: red!important;

— মিশাল

Answer 2

আপনি এটি বিবেচনা করেছেন কিনা তা আমি জানি না তবে আপনার অ্যাপ্লিকেশনটি আইটেমের বিভিন্ন গ্রুপিংয়ের রঙিনের উপর ভিত্তি করে আপনার সম্ভবত <optgroup>আরও রেফারেন্সিংয়ের জন্য ক্লাসের সাথে ট্যাগটি ব্যবহার করা উচিত । উদাহরণ স্বরূপ:

<select>
    <optgroup label="Numbers" class="green">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </optgroup>

    <optgroup label="Letters" class="blue">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </optgroup>
</select>

এবং তারপরে আপনার নথির শিরোনামে এই জাতীয় CSS লিখুন:

<style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>

Answer 3

হ্যাঁ আপনি এটি ব্যবহার করে বিরোধী উপায়ে সেট করতে পারেন,

option:not(:checked) { }

এটা যাচাই কর demo jsFiddle

এইচটিএমএল

<select>
    <option val="">Please choose</option>
    <option val="1">Option 1</option>
    <option val="2">Option 2</option>
    <option val="3">Option 3</option>
    <option val="4">Option 4</option>
</select>

সিএসএস

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#FFF;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) { 
    background-color: white; 
    color:#000;
}

Comments

@ আসওয়ান আসলে ক্রোমে রয়েছে আমার জন্য (v65) কাজ করছে তবে ফায়ারফক্স কোয়ান্টামে (v59) নয়।

— সিপিএইচপিথন

Answer 4

উত্তরগুলির মতো কিছু, তবে সত্যই বলা হয়নি, হ'ল আসল বিকল্প ট্যাগটিতে একটি শ্রেণি যুক্ত করা এবং CSS ক্লাস ব্যবহার করা ... এটি বর্তমানে IE এ ইস্যু না করে আমার জন্য কাজ করছে (উপরের এসএস দেখুন)।

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

সিএসএস:

.greenColor{
    background-color: #33CC33;
}
.redColor{
    background-color: #E60000;
}

Answer 5

শৈলীতে গুরুত্বপূর্ণ না হওয়া পর্যন্ত আমার নির্বাচনগুলি পটভূমিকে রঙ করবে না।

    input, select, select option{background-color:#FFE !important}

Answer 6

আপনি যদি সত্যিই একটি এর মধ্যে স্টাইল করতে চান তবে একটি জাভাস্ক্রিপ্ট / সিএসএস ভিত্তিক ড্রপ ডাউন যেমন http://getbootstrap.com/2.3.2/components.html#DPdowns বা https://silviomoreto.github.io/ এ স্যুইচ করতে বিবেচনা করুন বুটস্ট্র্যাপ নির্বাচন / উদাহরণ / । এটি কারণ আইআই এর মতো ব্রাউজারগুলি উপাদানগুলির মধ্যে বিকল্পের স্টাইলিংকে অনুমতি দেয় না । ক্রোম / ওএসএক্স-এও এই সমস্যা রয়েছে - আপনি স্টাইল বিকল্পগুলি করতে পারবেন না।

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

Answer 7

এখানে আমি বিষয় সম্পর্কে যা শিখেছি তা যায়!

সিএসএস 2 স্পেসিফিকেশন ব্যবহারকারীদের সময়ের জন্য ফর্ম উপাদানগুলি কীভাবে উপস্থাপন করা উচিত সে সমস্যার সমাধান করেনি!

এখানে পড়ুন: স্ম্যাশিং ম্যাগাজিন

অবশেষে , আপনি কখনও ডাব্লু 3 সি বা এই বিষয়ে সম্বোধিত অন্য কোনও প্রযুক্তিগত নিবন্ধ পাবেন না। নির্দিষ্ট নির্বাচিত বাক্সগুলিতে স্টাইলিং ফর্ম উপাদানগুলি সম্পূর্ণরূপে সমর্থিত নয় তবে আপনি কিছুটা চেষ্টা করে গাড়ি চালাতে পারবেন!

স্টাইলিং এইচটিএমএল ফর্ম উপাদানসমূহ

বিল্ডিং কাস্টম উইজেটস

হ্যাকগুলির সাথে সময় নষ্ট করবেন না যেমন লিঙ্কগুলি পড়ুন এবং কীভাবে পেশাদাররা কাজটি সম্পন্ন করবেন তা শিখুন!

Answer 8

কেবল বিজি রঙ পরিবর্তন করুন

select { background: #6ac17a; color:#fff; }

Answer 9

আর একটি বিকল্প জাভাস্ক্রিপ্ট ব্যবহার করা হয়:

if (document.getElementById('selectID').value == '1') {
       document.getElementById('optionID').style.color = '#000';

(সিএসএস অ্যাট্রিবিউট সিলেক্টারের মতো পরিষ্কার নয়, তবে আরও শক্তিশালী)

Answer 10

$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
    if($row['IsActive']==0){
        $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';

যোগ $htmlIngressCssআপনার HTML অংশে :)