Safari isn't recognizing the :focus-within pseudo-class

Question

Safari isn't recognizing the :focus-within pseudo-class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #my-button:focus-within {
      color: red;
    }
  </style>
</head>
<body>
  <button id="my-button" tabindex="0">item2</button>
</body>
</html>

Upon clicking the button, the text changes to a vibrant shade of red. It has been successfully tested in Chrome and Firefox, but Safari (version 15.6.1) seems to present some issues.

What could be causing this compatibility problem?

html css button safari focus

Answer 1

Answer №1

It appears that the :focus-within pseudo-class may not work with buttons in Safari; however, there is a workaround available:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #my-li:focus-within > #my-button {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li id="my-li" tabindex="0">
      <button id="my-button">item2</button>
    </li>
  </ul>
</body>
</html>

Answer 2

It appears that the :focus-within pseudo-class may not work with buttons in Safari; however, there is a workaround available:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #my-li:focus-within > #my-button {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li id="my-li" tabindex="0">
      <button id="my-button">item2</button>
    </li>
  </ul>
</body>
</html>

Safari isn't recognizing the :focus-within pseudo-class

Answer №1

Similar questions

Angular noticed a shift in the expression once it was verified

Exploring Checkbox Handling in AngularJS and ng-Grid

Preserve the timestamp of when the radio query was chosen

What is the best approach for looping through nested structures in Go?

Function: get the next item from an HTML POST form and register it as undefined when submitted

Pair of buttons triggering the submission of a form

Activating automatic HTML5 video playback for mobile browsers

Can a JavaScript function spontaneously run without being called upon?

The content contained within the .each loop within the click event is only executed a single time

Creating space between flex items in Slick Carousel with Vue

Is it possible to adjust CSS values in a relative manner?

I am having difficulty combining 2 HTML pages without the output becoming distorted

I'm curious to know if it's possible to incorporate addon code into a jQuery content script file within the Firefox addon SDK. If

Tips on aligning a checkbox and title on the same line

Unable to retrieve field values from Firestore if they are numeric rather than strings

The issue arises with owl carousel elements not functioning properly when added dynamically through ajax calls and jquery

Enhance your navbar with interactive image effects on hover

Tips on setting a background image to a div element

What causes the red square to descend when text is added?

Is it possible to have two different actions with two submit buttons in PHP?