Remove Blinking Cursor From Input Field

How to remove blinking cursor from an input element

Here is a real quick fix for that annoying blinking cursor in an input field. This is a very bad practice for accessability, and should be thought about before use.

HTML

<input type="text" name="" class="input">

CSS

.input{
    color: transparent;
    text-shadow: 0 0 0 red;
}

.input:focus{
    outline: none;
}

To change the color of your input text edit the text-shadow color to your desired color.

Codepen here

about raymond ware

About Me

Hi, I am Front End Developer working my way up the stack. I am passionate about web development and growing as a developer.