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

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

看看这个jsFiddle.

Answer 3

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

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

这将删除错误类：焦点输出。 当用户：在另一个时间聚焦输入元素时，它将返回默认颜色。

示例默认border-color with css：

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