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

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 />

Answer 2

你正朝着正确的方向前进。只需将outline: none;属性添加到input[type=text]即可，您将拥有一个没有边框的透明输入字段。闪烁的光标仍然在那里。

这是您修改过的代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

避免褪色边框添加到您的css代码

outline:0;

并确保客户端的设备将重点关注他点击的字段或单击将jQuery添加到页面标题并将以下代码添加到您的Javascript

$(document).click(function(e) {
$("[name=fname]").focus();
});

希望得到这个帮助。