0
147
ViewsHow do you remove the blinking cursor when clicking on text in a div (not <input>)
So I'm building a fun little Jeopardy (They reserve all of their rights) game for my work.
Building it using grid is super easy and all, but when I click on the <div> it adds the blinking text cursor after it (as shown in the picture below).
I tried doing cursor: default and cursor: none -- none made the JS stop functioning, and default didn't do anything (that's what the picture has).
CSS
#round-one {
display: grid;
grid-template-columns: 200px 200px 200px 200px 200px;
grid-template-rows: 100px 100px 100px 100px 100px 100px;
gap: 20px;
background-color: black;
width: 1080px;
height: 700px;
border: 20px solid black;
}
.round>div,
.round>span {
background-color: #021489;
display: inline-grid;
height: 100px;
width: 200px;
cursor: default; /** Same Location I tried cursor: none **/
}
.header {
font-variant: small-caps;
font-weight: bold;
color: white;
justify-content: center;
align-items: center;
font-size: 2em;
text-align: center;
}
.answer {
font-weight: bold;
color: #D7A04B;
justify-content: center;
align-items: center;
font-size: 4em;
text-align: center;
}
HTML Section
<body>
<div id="round-one" class="round">
<div id="r1c1r1" class="answer" onclick="question('r1c1r1')">
100
</div>
and JS
<script>
function question(id) {
alert("test");
}
</script>
I'll deal with the actual JS I'll be using later. As it stands right now, the cursor: default allows me to click and receive the alert().
·
Juan Pablo Isaza
1 answers
Answer question0
I use caret-color: transparent; for my forms where I find the blinking caret distracting. Technically the caret will still be "there" Just invisible.
·
Juan Pablo Isaza
Report
Answer question