focus-within | Style elements when they are focused or contain | Frontend Framework library

I do not understand what I am doing wrong (Im a backend guy though). Using Tailwind on VueJS, This menu wont appear above the DIV. I have tried z-index and everything but nothing will make it appear. When I try and force the menu to the front of the screen it wont appear. I have no idea what I am doing wrong.

Image Attached of issue

i have a huge problem with my project in react. I'm trying to update the libraries on my project but seems something wrong happens.

This is the package.json

I'm making a custom that contains an , and my goal is to remove the natural outline/border from the and place it on the containing such that it still looks natural when focussed, however, it seems that I am not getting the natural outline appearance and instead it looks like the outline is placed on the outside of the div...

Natural input element

My custom div containing the input

Is there something that can be done to achieve the natural outline look?

I have used outline: 5px auto -webkit-focus-ring-color; for the styling on the

I am trying to make floating input label which will float top when the input text area is focus. However, I ran into a problem where I can't click the input field because label is block me. There is small portion that I can press which is hard. Below I have shown my important code.

I need a hidden delete button to appear and work when a input is focused using markup and CSS in Svelte.

I got it all working in browsers for OS X and Raspberry Pi OS (Chrome, Chromium, Safari and Firefox). Click here to see it.

The problem is that the button appears but is not working in any of my iOS browsers (Safari or Firefox). Nothing is happening when the delete button is clicked.

I've tried following:

• focus-within works on Android browser but not iOS
• How to make a button appear only when input is focused

Here is the markup...

When i run npm audit on my react project i get the following long list of issues.

I am working on a new component for textareas and want to give them the ability to do three things; autofocus, debounce (still working on that) and autogrow/resize based on value.

I have been given a base component on which to work with and there are a few computed properties that I have been given that I'm not too familar with. From what I understand though, I shouldnt need them to be able to make these new props work.

I have the autofocus working perfectly as a passed prop, but the autogrow/resize has been giving me some trouble. In an isolated instance, I can get it to work, but passed as a prop with this basecomponent, I cannot managed to get it working.

When I try and add :value="value" for the v-model to work, I get an error:

:value="value" conflicts with v-model on the same element because the latter already expands to a value binding internally

I imagine this is because it's clashing with the v-model="model" above, but I'm not sure what to do with it from there.

I've attached the version that does work at the bottom.

My question is, what am I doing wrong in the CcInput-App.vue relation that won't make it work like the isolated version below?

Here's a link to the github repo as well!

If you need anymore information please do not hesitate to ask!

CcInput

I have created a button that eventually will have an onclick event-- when the user hovers over the button a div element pops up with an anchor that says "learn more" (in the example i used a long string to help solidify the issue) The code i designed works as expected with a mouse, however using the keyboard to tab across the elements -- the keyboard will first select the button (good) then will select the anchor (also good) but the anchor will immediately drop out of view since the parent isnt being hovered. This causes additional issues since it will maintain focus on the now hidden element and cause unexpected movements in content.

I have designed a codepen to demonstrate this issue https://codepen.io/honeynutz/pen/bGgXQyx

My code:

It's long been common practice to remove outline via CSS outline: none; from interactable elements such as buttons, since most of the time it looks off brand, but it hinders accessibility and makes navigating websites harder for people with disabilities that rely on keyboard navigation.

The problem is I have yet to find an easy way to differentiate the source of focus events between mouse/keyboard, and clicking as well as keyboard tabbing elements will trigger the focus state.

I know this issue has always been kind of a hot topic, but most sources are several years old, so I will show the main 4 methods I've found on how to achieve keyboard only focus, each with it's own pros and cons:

1. The "cheating" method, some websites such as Target.com have the same styles for hovering and focusing, this design choice gave them the option of not needing to remove the focus outline at all.

Pros: Goes around the problem.

Cons: Limited in design options.