0

I have a dropdown for selecting resolution and I am trying to have the text 'HD' appear in red. I have made a simple class to do this and assigned it to text but it will now appear as red in my option value.

<a class="red_color">HD</a> should be red

<div style="display:inline;" id="upload_1_fullAlbumResolutionChoiceDiv"><select id="upload_1_fullAlbumResolutionChoice"
        style="max-width:150px; text-align: left;">
        <option value="box_img.jpg" style="width:150px; text-align: left;">600x600 SD</option>
        <option value="box_img.jpg" style="width:150px; text-align: left;">640x640 SD</option>
        <option value="box_img.jpg" style="width:150px; text-align: left;">1280x1280 SD</option>
        <option value="box_img.jpg" style="width:150px; text-align: left;" selected="selected">1920x1920 <div
                class="red_color">HD</div></option>
        <option value="box_img.jpg" style="width:150px; text-align: left;">2560x2560 <div style="color:red;">HD</div>
        </option>
    </select></div>
    
    <style>
      .red_color{
      color:red
  }
  </style>
Martin
  • 1,336
  • 4
  • 32
  • 69
  • 2
    You need to create custom dropdown to have styling for the dropdown options. This element is browser's native element, so we cannot apply styling to this – Prathamesh Koshti Dec 15 '20 at 06:08
  • How can I do this? – Martin Dec 15 '20 at 06:39
  • does [this](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) answer your question? – Mahmood Kiaheyrati Dec 15 '20 at 06:43
  • You can use this: https://getbootstrap.com/docs/5.0/components/dropdowns/ and style it according to your requirements – Prathamesh Koshti Dec 15 '20 at 06:46
  • 1
    Does this answer your question? [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) – Nico Haase Dec 15 '20 at 07:23
  • @PrathameshKoshti I tried doing this with a bootstrap dropdown, but I cant use bootstrap because the dropdown cant have a default value be set, I want to have a default value selected but all the questions on how to implement this say to use the standard html option selection – Martin Dec 15 '20 at 07:45
  • @NicoHaase I went through all the examples but wasnt able to find a working alternative that could render the color of a subtext option while also being able to have a default value selected. Bootstrap can render individual text as a different color but the boostrap5 dropdown is unable to have a default value selected, which is something I want my table to do https://stackoverflow.com/questions/37503955/default-selection-in-bootstrap-dropdown – Martin Dec 15 '20 at 07:51

3 Answers3

0

try this :

select option {
    background: red !important;
    color: #fff;
}
microb14
  • 453
  • 4
  • 16
0

If you are using Bootstrap or normal html simply use <span> tag

 <a href=""><span className="text-danger">hd</span></a>

or, try using the below code in html pages

<a href="" ><span class="red_color"> HD </span> </a> should be red
Unknown Beginner
  • 173
  • 1
  • 4
  • 13
  • cant use bootstrap because the dropdown cant have a default value be set, I want to have a default value selected but all the questions on how to implement this say to use the standard html option selection – Martin Dec 15 '20 at 07:44
-1

You have to add a div tag inside your option tags and give color : red; in stlye, or you can try using bootstrap and use class="text-danger" it's easier option.

Rido Sitanggang
  • 29
  • 6