How to Hide Blinking Cursor in Input Text

How to remove the blinking cursor on focus in css?

You can give the input a transparent color and a text-shadow to display the text.

input{ color: transparent; text-shadow: 0 0 0 #2196f3;}

<div class="input-searchicon">   <input class="form-control search_radius mb-4 input-searchicon" type="text">   <span class="fa fa-search searchicon" aria-hidden="true "></span></div><div class="input-searchradius">   <input class="form-control search_radius mb-4" type="text" placeholder="search radius">   <span class="fa fa-globe globe" aria-hidden="true "></span></div>

Hide textfield blinking cursor

Try this:

$(document).ready(  function() {    $("textarea").addClass("-real-textarea");    $(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");    $(".textarea-wrapper textarea.hidden").keyup(      function() {        $(".textarea-wrapper textarea.-real-textarea").val($(this).val());      }    );    $(".textarea-wrapper textarea.-real-textarea").focus(      function() {        $(this).parent().find("textarea.hidden").focus();      }    );  });

.textarea-wrapper {  position: relative;}
.textarea-wrapper textarea {  background-color: white;}
.textarea-wrapper,.textarea-wrapper textarea {  width: 500px;  height: 500px;}
.textarea-wrapper textarea.hidden {  color: white;  opacity: 0.00;  filter: alpha(opacity=00);  position: absolute;  top: 0px;  left: 0px;}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><div class="textarea-wrapper">  <textarea></textarea></div>

How to hide the text box blinking cursor?

<input type=text disabled="disabled"/>

because i can't see any other reason you might want to do that.

edit:

i guess you want to allow the user to scroll the text that is larger than the area, but not show the blinking?

if that is so, you still want to disable it. not just hide the blinking cursor. if the user can't type there, it should be disabled. period.

now, if you still want to allow the user to see all the content, you have to make the input as big as the content. there is no escaping that.

and then limit the size with a parent div with CSS overflow: hidden or scroll.

<div style="overflow: scroll-x;"><input size=255 value="some string 255 char long" /></div>

How to hide blinking cursor after text ends

First change border-right of h1 to transparent
Then change the time animation of blink-caret to 5s or shorter if you want

body {  background: black;}
.typewriter h1 {  color: #fff;  font-family: monospace;  overflow: hidden;  /* Ensures the content is not revealed until the animation */  border-right: .1em solid transparent;  /* The typwriter cursor */  white-space: nowrap;  /* Keeps the content on a single line */  margin: 0 auto;  /* Gives that scrolling effect as the typing happens */  letter-spacing: .5em;  /* Adjust as needed */  animation: typing 5s steps(60), blink-caret 5s;}

/* The typing effect */
@keyframes typing {  from {    width: 0  }  to {    width: 80%  }}

/* The typewriter cursor effect */
@keyframes blink-caret {  from,  to {    border-color: transparent  }  50% {    border-color: orange  }}

<head>  <link rel="stylesheet" type="text/css" href="style.css" /></head>
<body>  <div class="typewriter">    <h1>Hello World</h1>  </div></body>
</html>

How to hide blinking cursor in Angular 2?

This is done by taking the focus away from the input field, which requires a tiny bit of javascript.

I don't know how your code works as you aren't providing the code but form submit would be I imagine, how you would trigger the action on enter?

So I'll do a quick example...

We have a form which is populated with an input field.

var form = document.querySelector('#form');var input = document.querySelector('#text');
form.onsubmit = function(e) {  e.preventDefault();  text.blur();}

<form id="form">  <input type="text" id="text"></form>