Simple CSS blinking cursor

Published June 4th, 2023 10 min read

Do you want to add a touch of interactivity to your text fields or input elements? A blinking cursor can provide a subtle yet engaging effect that draws users' attention. In this post, we'll explore how to create a simple CSS blinking cursor, perfect for enhancing the user experience on your website!

💡 How the Blinking Cursor Works:
We'll create the blinking cursor using a CSS animation. By alternately showing and hiding a pseudo-element within an input field, we can achieve the blinking effect.

💻 Let's Implement the Blinking Cursor:

<!DOCTYPE html>
<html>
<head>
  <title>Simple CSS Blinking Cursor</title>
  <style>
    input {
      font-size: 18px;
      padding: 8px;
      border: 2px solid #3498db;
      border-radius: 4px;
      position: relative;
    }

    /* Create the cursor animation */
    input::after {
      content: '';
      display: block;
      width: 2px;
      height: 20px;
      background-color: #333;
      position: absolute;
      top: 8px;
      left: 10px;
      animation: blinkCursor 1s infinite;
    }

    @keyframes blinkCursor {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <input type="text" placeholder="Type something..." />
</body>
</html>

🌟 How it Works:

We create an input field with some basic styles, such as font size, padding, and border to make it visually appealing.
To create the cursor, we use a pseudo-element (input::after) and set its content to an empty string. The ::after pseudo-element allows us to insert content after the input field.
We use the animation property to apply the blinkCursor animation to the pseudo-element. This animation defines the blinking effect by toggling the opacity property between 0 and 1.
The @keyframes rule defines the blinkCursor animation with keyframes at 0%, 50%, and 100%. At 0% and 100% (start and end), the cursor is not visible (opacity: 0). At 50% (midpoint), the cursor is fully visible (opacity: 1).

📱 Embrace Responsiveness:
The blinking cursor is fully responsive and will adapt seamlessly to different screen sizes and devices.