css - CSS输入：只关注第一次点击

Question

有谁知道输入方法：仅在第一次单击时聚焦元素？

<style>
input[type='text'].error:focus{border-color:#f00} 
</style>

因此，如果用户“聚焦”它会返回到原始边框颜色。

提前感谢您的任何提示。

编辑

我完全不确定。谢谢@blender。

我认为最简单的方法是使用 jquery 或类似方法，对吗？

Answer 1

我对“仅在第一次单击时”的意思感到困惑。如果你想在点击时设置输入样式，你可以使用这个 CSS：

input[type="text"].error:focus { border-color: #f00; }

这个HTML：

<input type="text" class="error" />

这将设置输入边框的样式，因为它具有错误类（如果您正在动态添加/删除类）。

但是，如果您正在为错误设置样式（例如，如果用户没有填写表单），您可能想尝试这样的事情：

 input[type="text"]:invalid { border-color: #f00; }

 input[type="text"]:valid{ border-color: #; } //If form is filled in

然后在您的 HTML 中：

<input type="text" required />

这有助于回答你的问题吗？

Answer 2

对于所有有相同或类似问题的人，这里有一个可能的 jQuery 解决方案：

 $('input').on('focusout',function(){
 $(this).removeClass('error');
 });

这将删除 :focus out 上的错误类。当用户 :focusin 再次输入元素时，它会返回默认颜色。

带有 css 的默认边框颜色示例：

 <style>
  input[type='text']:focus {border-color: black;}
 </style>

Answer 3

正如@Blender 所说，这在纯 CSS 中似乎是不可能的。
我建议处理事件以将类添加到元素focusin并focusout使用data-属性来获取元素是否已被单击。

看看这个jsFiddle。