htmlcssforms

Input cursor that is blinking


i am having trouble with making the input cursor to blink. How do you make an animation that the cursor "|" inside the input field (placeholder) keeps blinking. The code that i have is this:

<input type="text" class="rq-form-element" placeholder="|"/>

I have no idea on how to get this even started. Any suggestions?


Solution

  • Try this solution

    .cursor {
      position: relative;
    }
    
    .cursor i {
      position: absolute;
      width: 1px;
      height: 80%;
      background-color: gray;
      left: 5px;
      top: 10%;
      animation-name: blink;
      animation-duration: 800ms;
      animation-iteration-count: infinite;
      opacity: 1;
    }
    
    .cursor input:focus+i {
      display: none;
    }
    
    @keyframes blink {
      from {
        opacity: 1;
      }
    
      to {
        opacity: 0;
      }
    }
    <div class="cursor">
      <input type="text" class="rq-form-element" />
      <i></i>
    </div>

    Live demo - https://jsfiddle.net/dygxxb7n/