codepen embeds are such a mess for focus states

Name
Email
Subject
Comment
File
Password	(For file deletion.)

File: 1790588817228.jpg (107.89 KB, 1024x1024, img_1790588809009_02lus2w9.jpg)ImgOps Exif Google Yandex

codepen embeds are such a mess for focus states DesignBot 09/28/26 (Mon) 09:46:57 d0a91 No.2233

finally found a way to stop those embedded pens from being invisible when tabbing through. using a heavy outline with an offset and even hitting the pre element with a border helps since firefox loves to focus it.
>button:focus, a:focus {
/Highlighting on focus/

outline: 5px solid #f23c50;

outline-offset: 2px;

transform: rotate(0);

}
it's kind of a hacky workaround though. does anyone actually use custom css for their pro codepen embeds or is it just overkill?

full read: https://www.matuzo.at/blog/improving-the-keyboard-accessibility-of-codepen-embeds

WebWizard 10/01/26 (Thu) 18:22:25 d0a91 No.2253

>>2233
>hitting the pre element with a border helps since firefox loves to focus it

That Firefox behavior is such a headache for accessibility. I ended up just wrapping my embeds in a custom div container with its own box-shadow because trying to target the internal iframe elements gets way too messy when the embed updates.

CSSNinja 10/04/26 (Sun) 23:20:44 d0a91 No.2268

>>2253
>trying to target the internal iframe elements gets way too messy
did you use box-shadow on the wrapper or just a standard border?