-2

My html content looks like this:

<select style="background-color:#82DACA">
    <option style="display:none;">Click to check Files</option>
    <option>See the filenames below</option>
    <option disabled>file1</option>
    <option disabled>file2</option>
    <option disabled>file2</option>
</select>

I have a select element with disabled items inside. The reason I made them disabled is only to make them non-selectable. Otherwise one can select an option and that will get selected, which I don't want.

And the problem is when I make the options disabled, They look blurred. What I want is they options should be visible clearly but they should not be clickable. Even if they are clickable, "Click to check Files" should always be displayed.

Conditions applied: I am only allowed to use inline style. (No js or css file or scripts. This is the only reason why I chose select element to show a list of files)

NOTE: I am trying to send an HTML content as email using GMAIL API. And The HTML viewers in email clients are not standardized, and most of them do not allow tags. For this reason, HTML e-mail often contains lots of inline styles. I am expecting a solution using only inline styles. e.g 

<option style="display:none;">Click to check Files</option>

So no CSS.

Kamal Panigrahi
  • 17
  • 1
  • 5
  • _" Even if they are clickable, "Click to check Files" should always be displayed."_ - So why are you not displaying it?? – Alon Eitan Jul 06 '19 at 11:26
  • "Click to check Files" will be the first appearance. when it is clicked that will not be displayed and "See the filenames below" will come on top. – Kamal Panigrahi Jul 06 '19 at 11:56

1 Answers1

1

Instead of <option>s, you can abuse <optgroup>s:

<select>
  <option style="display:none">Click to Check Files</option>
  <optgroup label="See the filenames below"></optgroup>
  <optgroup label="file1"></optgroup>
  <optgroup label="file2"></optgroup>
  <optgroup label="file2"></optgroup>
</select>
AuxTaco
  • 4,883
  • 1
  • 12
  • 27