2

I can not for the live of me figure out why the below code has a black rectangle in it, as far as I can tell its something left behind by the hidden option, but I've got no idea how to hide it or change its color.

What is this and how do we manipulate it?

<div>
  <select>
    <option hidden>Select flow slides</option>
  </select>
</div>

Here is a codepen link where you can see this happen: https://codepen.io/Nick09/pen/NWGmJGy

And a link with the mystery rectangle that appears when clicking the select element: https://i.stack.imgur.com/e93QB.jpg

More image examples: https://i.stack.imgur.com/Nefe5.jpg

Update: After someone in the comments suggested something I figured out that the problem is much simpler than I first thought. Mainly, whenever you click on a select without any options, you get this little black dropdown: https://i.stack.imgur.com/H9Td0.jpg.

Nick09
  • 206
  • 2
  • 15
  • 1
    Is there any CSS file attached to this html code? If so, please consider adding it. – Soban May 26 '20 at 09:59
  • Hello @Soban, no this is all the code, if you copy paste it into a Codepen you will see the problem I am talking about, or if you think its better I will post a Pen here for people to see! – Nick09 May 26 '20 at 10:00
  • 1
    I am currently working on your question, but are you asking why there is a black border around the 'Select flow slides' text? – Soban May 26 '20 at 10:02
  • 1
    Hello again @Soban, you're right I should have added more info, I've taken the liberty and posted a codepen and a image of my problem. When clicking the select element, that black rectangle pop's up. If you add more options into the select element you can style these options with a *background* property and so the black rectangle goes away! But my problem is that I am not adding more options there, I'm using *divs* somewhere else so adding more option elements is not a option (play of words). Please let me know if there's any additional info I can provide. Thank you! – Nick09 May 26 '20 at 10:05
  • But you have added _options_ inside the _select_. You said 'I'm using divs somewhere else'. Can you show their code (the other divs)? – Soban May 26 '20 at 10:17
  • 1
    This does seem to affect Edge, i am not seeing the black box in Chrome or Firefox. – Stuart May 26 '20 at 10:20
  • Sorry I meant 'that is the only option that will be inside the select', I will be adding the *divs* with javascript later. But to be honest that does not have any relevance to the problem, the problem is the one that is presenting in this situation right now, with only that *html markup* you can see the black rectangle right? When clicking on the *select*. Where does this come from? And how can we style such a thing? – Nick09 May 26 '20 at 10:20
  • Hello @Stuart, thank you for the additional info. That's quite weird, I'm getting that issue on Chrome right now, but on your suggestion I checked the codepen in Firefox and strangely enough I'm not seeing the issue there. Weird... – Nick09 May 26 '20 at 10:22
  • Here is an image link of this happening in Chrome (83.0.4103.61) x64 : https://imgur.com/R2FMZsh – Nick09 May 26 '20 at 10:24
  • I am also seeing on Chrome, before we click the select tag, this is what I have: https://imgur.com/a/43Wf7Nj . And after clicking the select tag, I get https://imgur.com/1HVB9jq As you can see, I don't get the black background. – Soban May 26 '20 at 10:35
  • This is so very strange... What could be causing such and random issue, I've looked on all elements, I've tried a different pen, changed colors of everything to red / blue / yellow and still can't tell there its coming from. Mystery rectangle indeed... – Nick09 May 26 '20 at 10:40
  • Does this answer your question? [How to hide only one option element using css only](https://stackoverflow.com/questions/34317059/how-to-hide-only-one-option-element-using-css-only) – Cornel Raiu May 26 '20 at 11:08
  • Hello @CornelRaiu, thank you for your suggestion but unfortunately its pretty much the same thing, see this link: https://imgur.com/a/MhYNPy8. Once I remove the other options the box can be visible again. – Nick09 May 26 '20 at 11:24

2 Answers2

1

Use style attribute to hide the entire option.

<option style="display:none">Select flow slides</option>

Or use disabled attribute to disable the option (remove hidden attribute)

<option disabled>Select flow slides</option>
Tharun Gnanaselvam
  • 54
  • 4
  • Hello @Tharun and that you very much for your answer, unfortunately it doesn't solve my the issue, check this link out: https://imgur.com/a/MhYNPy8 I've tried doing this at some point also but I still felt the screenshots would help show the issue again. Thanks again! – Nick09 May 26 '20 at 11:01
  • Remove the 'hidden' attribute – Tharun Gnanaselvam May 26 '20 at 11:02
  • If I remove the hidden attribute then the option if going to be displayed in the drop down menu, but I just want it to show as a *placeholder* for the list – Nick09 May 26 '20 at 11:28
  • 1
    Then add 'selected' attribute in the tag like – Tharun Gnanaselvam May 27 '20 at 13:37
  • Close! But if I do that its the same black rectangle, so I think I actually understand what the problem is now. When you click on an *empty select element* it displays a black rectangle! Take a look here: https://imgur.com/ZfFn5DN – Nick09 May 27 '20 at 15:13
1

So after some time invested in this and quite a bit of help from the community I've managed to come up with a fix.

Since the problem boils down to: on some machines it seems (managed to replicate it on someone else's PC/Windows) that a select element without any options will produce a black drop down on mouse down.

And you need a select element with no options because of different reasons, in my case it was because I was later removing what was inside of the aforementioned select element in order to add a custom drop down.

Then all you need to do is add a event listener that listens for a onmousedown event and do e.preventDefault() on it so that the default drop down list does not open at all.

Tested on all browsers with no issues!

End result: https://i.stack.imgur.com/nLw7i.jpg

Thank you for your suggestions guys!

Nick09
  • 206
  • 2
  • 15