Sorry if this is pointed out elsewhere; this happened a while ago, but I’ve only gotten around to asking it out now.
When you use the “Hide Details,” it now always spawns with this gray box around the selection and everything inside it, like so:
Hide details option (surrounded in this gray box)
Whatever text inside it
This is often a nice change for accessibility/ease of use, but it also completely overrides any CSS boxes the text is within, getting in the way of certain use cases.
Like, let’s say I wanna put time into a colored box with a very neatly organized aesthetic look-
Oh no! This ugly gray box in the middle of my post! I have no way to integrate or remove it!
This doesn't fit with my intended look at all!
Also this text is almost completely illegible!
At least I can put another text box in here, but this still looks way different to what I wanted.
And in fact, my black text color now clashes with that background and makes an even worse accessibility issue than before!
So is there any way to control the formatting of that outline? Etiher a way to remove it entirely, and/or to modify it’s look, so as to integrate it into a custom CSS setup?
There was a discourse system/forum update a few months back that made this change and now forces it’s own style instead of following css. I think currently our best option is to just cope as the dropdowns entirely ignore everything but font changes now, assuming there’s nothing the site owners can do on their end to aid the issue.
I have a very complicated solution that only resolves half of the problem. I colored the text and removed the arrow, but the box background is still black/grey. Credit to Portalkat just in case
Welcome to my very fancy, organized text.
What is BRAND?
Brand Automóvil
Brand Automóvil is
Text after the box is not white! Success!
asfasdf
Solution One
<div style="background-color: white; font-family: times new roman; padding:5%; border-style:ridge groove groove ridge; border-width:8px; font-size: 17px; z-index: 2; position: relative; color: black">
Welcome to my very fancy, organized text.
<div align="center">
<div style="font-size: 0px; cursor: help; color: white">
<details>
<summary><span style="font-size: 17px; font-family: times new roman; cursor: help;">
What is </span><span style="font-size: 17px; font-weight: bold; font-family: times new roman; cursor: help;">BRAND?</span></summary>
<div style="; font-family: times new roman; text-shadow: none; cursor: help; font-size:16px; padding: 15px; font-weight: normal; ">
-----
<div align="left">
<div style="text-align: center; font-size: 18.5px; font-weight: normal; font-family: times new roman; cursor: help; font-weight: bold">Brand Automóvil
-----
</div>
Brand Automovil is
</div>
</div>
</div>
</div>
</details>
Text after the box is not white! Success!
</div>
Welcome to my other very fancy, organized text.
What is SOLUTION TWO?
Brand Automóvil
Brand Automóvil is
This is an interesting way to make the box internals all-white without the border you encountered.
asfasdf
I’ve only just noticed the padding % doesn’t work very well on mobile and may need adjusting
Solution Two
<div style="background-color: white; font-family: times new roman; padding:5%; border-style:ridge groove groove ridge; border-width:8px; font-size: 17px; z-index: 2; position: relative; color: black">
Welcome to my other very fancy, organized text.
<div align="center">
<div style="font-size: 0px; cursor: help; color: white; ">
<details>
<summary><span style="font-size: 17px; font-family: times new roman; cursor: help;">
What is </span><span style="font-size: 17px; font-weight: bold; font-family: times new roman; cursor: help;">SOLUTION TWO?</span></summary>
<div style="; font-family: times new roman; text-shadow: none; cursor: help; font-size:16px; padding: 15px; font-weight: normal; color: black; background-color: white; margin-right: -2.5%; margin-left: -2.5%; margin-bottom: -2.5%">
-----
<div align="center">
<div style="background-color: white; text-align: center; font-size: 18.5px; font-weight: normal; font-family: times new roman; cursor: help; font-weight: bold; color: black;">Brand Automóvil
-----
</div>
Brand Automóvil is
</div>
</div>
</div>
</div>
</details>
This is an interesting way to make the box internals all-white without the border you encountered.
</div>