Skip to content

Instantly share code, notes, and snippets.

@bloggrammer

bloggrammer/style.md

Created August 22, 2024 07:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bloggrammer/5c7d97ccdae5fd5ff448121e273db0cd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bloggrammer/5c7d97ccdae5fd5ff448121e273db0cd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bloggrammer created this gist Aug 22, 2024.
    43 changes: 43 additions & 0 deletions style.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    ## Apple Scrollbar
    To style an HTML scrollbar like Apple's scrollbar, you can use CSS. Here's an example:
    CSS.

    This CSS targets WebKit browsers (like Safari and Chrome) and styles the scrollbar with a similar look and feel to Apple's scrollbar.

    > Note that this won't work in non-WebKit browsers like Firefox.
    ```
    ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    }
    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    }
    ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    }
    ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
    }
    ::-webkit-scrollbar-corner {
    background: transparent;
    }
    ```
    ## Password Toggle on Edge Browser
    Clear password eye toggle on Edge Browser

    ```
    input::-ms-reveal,
    input::-ms-clear {
    display: none;
    }
    ```