JSFiddle - React, Tailwind, and code Playground

by tanakaworld

HTML

<h1>
NOT !important
</h1>

<select class="Select">
  <option class="Select__Option">AAAA</option>
  <option class="Select__Option">BBBB</option>
  <option class="Select__Option">CCCC</option>
</select>


<h1>
!important
</h1>

<select class="Select2">
  <option class="Select__Option2">AAAA</option>
  <option class="Select__Option2">BBBB</option>
  <option class="Select__Option2">CCCC</option>
</select>

<h1>
HTML Tag
</h1>

<select class="Select3">
  <option class="Select__Option3">AAAA</option>
  <option class="Select__Option3">BBBB</option>
  <option class="Select__Option3">CCCC</option>
</select>

<h1>
HTML Tag2
</h1>

<select class="Select4">
  <option class="Select__Option4">AAAA</option>
  <option class="Select__Option4">BBBB</option>
  <option class="Select__Option4">CCCC</option>
</select>


<h1>
Inline
</h1>

<select style="color: red;" class="Select3">
  <option class="Select__Option">AAAA</option>
  <option style="color: blue;" class="Select__Option">BBBB</option>
  <option class="Select__Option">CCCC</option>
</select>

CSS

.Select {
  color: red;
}

.Select__Option {
  color: blue;
}

.Select2 {
  color: red;
}

.Select__Option2 {
  color: blue !important;
}

select.Select3 {
  color: red;
}

option.Select__Option3 {
  color: blue;
}

select.Select4 {
  color: red;
}

select.Select4 >> option.Select__Option4 {
  color: blue;
}