I have an element that I would like to keep constantly positioned at the end of a string of text, as if it's a blinking I-shaped cursor you see when typing.
However, it will currently only sit directly below the text.
I have tried display: flex, float: left and display: block but none of those worked.
Here is my code:
function myFunction()
{
result.innerHTML += "I will not make any more boring art ";
}body
{
background-color:white;
font-family: Lucida Console Regular;
font-size:15px;
color:black;
border-width:0px;
border: 0;
}
input {
font-size:15px;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
background-color: white;
font-family: Lucida Console Regular;
color: transparent;
display: inline-block;
}
result{
display: flex;
}
.no-outline:focus {
outline: none;
}
textarea:focus, input:focus{
outline: none;
}
.cursor {
position: relative;
float:left;
flex:1;
}
.cursor i {
flex:1;
position: absolute;
width: 1px;
height: 100%;
background-color: black;
animation-name: blink;
animation-duration: 800ms;
animation-iteration-count: infinite;
opacity: 1;
}
@keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}<input class="class" type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" >
<div id="result"></div>
<div class="cursor">
<input type="text" class="rq-form-element" /><i></i></div>You could just make use of the ::after selector to create the blinking cursor. That way it will always sit after the last character, like so:
function myFunction() {
result.innerHTML += "I will not make any more boring art ";
}@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Orbitron:wght@400;500&family=Play&display=swap');
body {
font-family: 'Inconsolata', monospace;
font-size:15px;
}
input {
border: hidden;
background-color: white;
color: transparent;
}
#result::after {
content: '';
border-right: 1px solid black;
height: 100%;
animation-name: blink;
animation-duration: 800ms;
animation-iteration-count: infinite;
}
textarea:focus, input:focus {
outline: none;
}
@keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}<input class="class" type="text" onkeydown="myFunction()" placeholder="type something" autofocus spellcheck="false" >
<div id="result"></div>
<div class="cursor">
<input type="text" class="rq-form-element" /><i></i>
</div>