My cursor is horizontal in the input box, how do I make it a vertical blinking cursor to accept type as user enters types?
Can we see an example?
In Chrome & Firefox the cursor in the input is vertical by default when focussed.
However I did add a property to css
transform:rotate(90deg)
to make boxes horizontal, as in a row.
I guess the cursor turned also?? Can you tell me a way to turn cursor to be vertical to accept text or advise another way to do this?
Thanks
I would say your right, it turned the cursor too. What happens when you type text in the box, is it turned too?
There is a vertical-text value for the cursor, the shape of a sideways I-beam. If that’s what you started with then it would be vertical after your transform rotates it. If you have already set up a class for the boxes you rotated then that is where you would apply the cursor styles.
cursor: vertical-text;
I’d say use a different layout method for your rows. I see how they need to intersect to share the same letter with adjoining columns. This looks like a job for grid but it might get complex.
Post your html and css so we can see what your doing.
1 Like
<div class="crossword-board">
<!-- ROW 1 -->
<span class="crossword-board__item--blank" id="item1-1"></span>
<span class="crossword-board__item--blank" id="item1-2"></span>
<input id="item1-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[cC]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item1-4"></span>
<span class="crossword-board__item--blank" id="item1-5"></span>
<span class="crossword-board__item--blank" id="item1-6"></span>
<span class="crossword-board__item--blank" id="item1-7"></span>
<span class="crossword-board__item--blank" id="item1-8"></span>
<span class="crossword-board__item--blank" id="item1-9"></span>
<input id="item1-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item1-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<input id="item1-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<input id="item1-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<input id="item1-14" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<!-- ROW 1 -->
this is how all the rows are laid out, it didn’t let me paste whole code
This is my code for the clue boxes and the function to display the right or wrong message
<h1a>CLUE:</h1a>
<h2> ...and Stripes</h2>
<div class="clue-box
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1" autofocus-next">
<div id="result">
<script>
function initAutoFocus (input, index, list) {
const next = list[index + 1]
if (!next) {
return
}
input.addEventListener('input', () => {
if (input.value.length === input.maxLength) {
next.focus()
}
})
}
document
.querySelectorAll('.auto-focus-next')
.forEach(initAutoFocus)
Sorry, this is the function to display messages:
function documentInputHandler(evt) {
const fields = document.querySelectorAll(‘.auto-focus-next’);
const values = Array.from(fields).map(f => f.value).filter(v => v);
if (values.length < fields.length) {
return;
}
document.querySelector(“#result”).innerHTML = (
values.join(“”) === “STARS” ? “
YOU ARE CORRECT!” : “
TRY AGAIN!!”
);
}
document.addEventListener(“input”, documentInputHandler);
This is now the clue boxes are laid out and they are to autofocus to next input after user enter a letter and backspace if the make a mistake:
<input type=“text” class=“clue-box__item” type=“text” minlength=“1” maxlength=“1” autofocus-next">
<input type=“text” class=“clue-box__item” type=“text” minlength=“1” maxlength=“1” autofocus-next">
<input type=“text” class=“clue-box__item” type=“text” minlength=“1” maxlength=“1” autofocus-next">
<input type=“text” class=“clue-box__item” type=“text” minlength=“1” maxlength=“1” autofocus-next">
<input type=“text” class=“clue-box__item” type=“text” minlength=“1” maxlength=“1” autofocus-next">
Why didn’t you just align them individually in a row? If you rotate them then the text in the input will be rotated also.
Or did I misunderstand something important?
Yea. I thought about that also, maybe the boxes should be coded individually. Would you coded them separately then add if statements to determine if right or wrong?
There are no ‘if’ statements in CSS so I think you must be referring to some JS functions which don’t really seem to have anything to do with your question 
I must have missed something but when you say “the boxes should be coded individually” I am having a hard time understanding what you mean. What boxes?
The original question was about a cursor in an input which was caused by you rotating it.
In order to answer your question more efficiently I suggest you post a small demo of the problem that you want solved either online or in codepen. It shouldn’t be too hard to make a working demo of the current problem you have. Remember though this is the CSS forum and I have not looked at your other threads in the JS forum and am only replying to the topic of your post. 
1 Like
Ok. The problem is how to change the cursor to vertical, as it is horizontal in the picture in Post 3.The boxes I am referring to are the 5 boxes in Post 3, what code would you use to create these boxes in this same position as in picture and to automatically move focus to next input square after square reaches maxlength, which is 1.
Thanks
Hardly have to do anything as that’s their default.
I’d use flexbox anyway and do this:
1 Like
Ok. This works good. What is the div id result for? In the html there is only one autofocus, does this need to be on all the input tags, so that when user enter a letter cursor will automatically focus to next input? And what property to add to css to center the cursor in box?
It was shown in the code you posted in post #5. I would assume that is how it made it’s way into Paul’s codepen. However, the closing div tag after <div id="result"> should really be the closing div tag for <div class="clue-box">
Just remove <div id="result"> if you don’t need it. But leave the closing div tag after it.
If you remove the lone autofocus-next it does not cause any problems. The JS is still doing the work.
text-align:center;
.clue-box__item {
flex: 0 0 35px;
width: 35px;
height: 35px;
border: 1px solid #000;
margin: 0 -1px 0 0;
text-align:center;
}
1 Like
I figured out how to center, but the auto focus still does not work, do I need to add an id to the input tags. I want to enter the word “stars” in the boxes. Enter s in first box then auto focus to next, press a and so on.
Thanks
The JS from post #6 uses .innerHTML to write the results into that div.
It looks like it needs to stay there. Add back another closing div for the parent div though.
That is what Paul’s codepen is doing. One letter per box and it auto focuses to the next box. The five boxes allow for the word “stars” to be filled in.
Did you try it?
1 Like
Sorry, is works. The first time I tried It didnt. So can I now use the code from post6 to determine the results.
Thanks
Yes, it seems to work fine with a few adjustments. Changed .auto-focus-next to .clue-box__item
Since you capitalized “Stripes” and it was the clue, I changed “STARS” to “Stars”.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.clue-box {
display: flex;
align-items:center;
}
.clue-box__item {
width: 35px;
height: 35px;
border: 1px solid #000;
margin: 0 -1px 0 0;
text-align: center;
}
#result {margin-left:10px;}
</style>
</head>
<body>
<h1>CLUE:</h1>
<h2> ...and Stripes</h2>
<div class="clue-box">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
<input type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
<div id="result"></div>
</div>
<script>
(function (d) {
"use strict";
const input = d.querySelectorAll(".clue-box__item");
for (let i = 0; i < input.length - 1; i++) {
input[i].addEventListener("input", () => {
if (input[i].value.length === input[i].maxLength) {
input[i + 1].focus();
}
});
}
})(document);
function documentInputHandler(evt) {
const fields = document.querySelectorAll(".clue-box__item");
const values = Array.from(fields).map(f => f.value).filter(v => v);
if (values.length < fields.length) {
return;
}
document.querySelector("#result").innerHTML = (
values.join("") === "Stars" ? "✅ YOU ARE CORRECT!" : "❌ TRY AGAIN!!"
);
}
document.addEventListener("input", documentInputHandler);
</script>
</body>
</html>
1 Like
Ok.how do I move the flex to the same position as in post3 is it flex-row for the direction and flex-end to move over?
Thanks
Ok. What is a function to backspace in those five clue boxes in case the user makes a typo/mistake. Do you need keyboard listeners for this?
Thanks