1

About the problem: The link is the inVision design of an input element with custom css styles. enter image description here
As you can see, its border is removed except the bottom line and the cursor/blinker looks pretty thick.

Here's what I have done so far.

<input class="custom-input" />

.custom-class {
      border: none;
      border-bottom: #eee solid 3px;
      line-height: 2;
      font-size: 36px;
      text-align: center;
      caret-color: #231F20;
}

What is missing so far is that the blinker is still an ordinary one. I have gone through research to find answers. There are a bunch of articles and StackOverflow answers for caret-color but none of them answers how to change the thickness of it.

Also, there is a codepen demo for using a span element by enabling the content to be editable.

But my question is "Is there a solution with only css styles after all the days of evolution in modern css?"

Thanks in advance.

PS. I am not looking for caret-color property solutions. I am talking about the thickness of the blinker specifically.

Maestro Dever
  • 562
  • 1
  • 8
  • 20

1 Answers1

0

I don't know if you can modify the text caret thickness (I only see one related property), but you can change its color with caret-color.

There seems to be some ways to change the caret thickness using OS tools, but none in css for the moment.

Edit: There is another way to customize the caret: use js to create a new caret above the classic one (src -> link, src2 -> link2 (jQuery plugin)).

I forked a codepen, and I think you can use the "cutom caret" to hide the authentic one :)

sodimel
  • 864
  • 2
  • 11
  • 24
  • 1
    Yeah, @sodimel. That’s what I have found with bunch of answers but doesn’t answer my question. I am looking for solutions for thickness of the blinker, not its color. – Maestro Dever Jul 09 '19 at 18:32