html - 使输入背景透明并显示闪烁的光标？

Question

input[type="text"] {
  background: transparent;
  border: none;
}

<input type="text" name="fname" autofocus />

我正在尝试制作一个具有透明背景的输入字段，但它仍然显示闪烁的光标，以便用户知道在哪里输入。我很接近，但并不完美:

• HTML:使光标在加载时闪烁。但是，这不适用于手机，如果您点击屏幕，它就会停止。

• CSS:使背景透明(但单击时仍会留下蓝色褪色边框？)

是否有更好的方法来执行此操作或者修复我的代码的最佳方法是什么？

Answer 1

对于第 1 点，如果您希望始终在该字段中有一个假光标，您需要使用 js 或 css 动画做一些有创意的事情。

我希望您明白，在输入字段中出现闪烁的光标(即使它未处于焦点)会破坏用户体验。

对于第 2 点，只需删除 focus 上的轮廓即可。

input[type="text"] {
  background: transparent;
  border: none;
}

input[type="text"]:focus {
  outline: none;
}

<input type="text" name="fname" autofocus />