رها کردن رنگ موردنظر انتخاب شده

سلام
من یک کادر انتخاب دارم و میخواهم وقتی کادر انتخاب شد، رنگ پس زمینه گزینه ها تغییر کند. چه کار باید بکنم؟

سلام، روزتون بخیر

<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>

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

شما باید رنگ پس زمینه را روی برچسب گزینه قرار دهید و نه برچسب انتخاب...

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

اگر می خواهید هر یک از برچسب های گزینه را سبک بندی کنید... از انتخاب ویژگی css استفاده کنید:

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>

سلام، بسیار ممنونم
خیلی جامع و کامل پاسخ دادید.

سلام دوستان
من هم همین کارو میخواستم انجام بدم
ممنون جوابتون خیلی کامل بود.