Using Safari's native switch input with Bootstrap

Safari introduced a native HTML switch element in version 17.4 which is easy to use just by adding the switch attribute to a checkbox input.

This is a great feature that allows developers to create a switch without the need for JavaScript or CSS and I hope that other browsers adopt this too. For now you can use a native switch in Safari with fallback styling for other browsers using Bootstrap.

CSS

This @supports selector is used to target Safari 17.4 and later. It will turn off some of Bootstrap’s custom switch styles and use the native switch styles in Safari. If you want to use Bootstrap’s custom switch styles in Safari you can simply omit the CSS below.

@supports (-webkit-hyphens: none) and (word-spacing: 1%) {
  .form-switch .form-check-input[type="checkbox"][switch] {
    accent-color: #0d6efd;
    /* Sets the accent color of the switch to same color as what Bootstrap uses */
    background-color: transparent;
    /* Removes the background color used by Bootstrap's custom switch */
    background-image: none;
    /* Removes the background image used by Bootstrap's custom switch */
    border: 0;
    /* Removes the border used by Bootstrap's custom switch */
    opacity: inherit;
    /* Prevent the disabled state from having additional opacity applied */
    -webkit-appearance: auto;
    /* Resets the appearance to auto. */
    /* There's no need to define the prefix-less version since this is Safari-only */
  }
}

With switch attribute

Without switch attribute

Examples showing Bootstrap’s switch styles without the switch attribute.

Codepen Demo

You can also view the demo on Codepen.

Notes and Observations

• The accent-color property can be used to change the color of the switch in Safari. By default it appears green on macOS and blue on iOS. In my example I set it to the same color as what Bootstrap uses for the switch for consistency.
• The role="switch" attribute is used to indicate that the input is a switch. This is not necessary but it is a good practice to use it. On Safari it is not necessary to use it if the input has the switch attribute.
• On Safari macOS the native switch appears pixelated when zoomed in. On iOS and iPadOS it appears fine.
• In the future you’ll be able to style the thumb and range (using the ::thumb and ::track selectors) of the switch which allows you to style the switch more than just changing the color. I didn’t go into that in this article but you can read more about it in the WebKit blog post.
• Using Safari’s native switch has the advantage of being optimized for the ‘prefers contrast’ setting (which uses a darker color for the off state) in iOS and macOS and also for the ‘Differentiate without color’ setting (which adds on and off glyphs).
• Using Safari’s native switch gives haptic feedback when toggling the switch on iOS. For that reason, even if you don’t want to use Safari’s native switch styling you can use the switch attribute and don’t use the custom CSS above so it uses Bootstrap styling but still gets the haptic feedback as a progressive enhamcement.