css中onblur |进度条css 动画 横向

button {
background-color: red;
}
button:focus {
background-color: green;
}

上面的代码将在按钮元素获取焦点时将其背景颜色更改为绿色。但是，当用户再次点击页面上的其他元素时，按钮将失去焦点并且背景颜色将变为红色。

如果大家想要对失去焦点事件做某些事情，例如在元素失去焦点时验证输入框的内容，大家可以使用onblur属性：

input {
border-color: gray;
}
input:focus {
border-color: blue;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
input:required:valid:focus {
border-color: purple;
}
input:required:invalid {
border-color: orange;
}
input:required:invalid:focus {
border-color: yellow;
}
input:required:valid {
border-color: black;
}
input:required {
border-color: brown;
}
input:optional {
border-color: pink;
}
input:optional:focus {
border-color: magenta;
}
input:read-only {
border-color: cyan;
}
input:read-only:focus {
border-color: lime;
}
input:read-write {
border-color: olive;
}
input:read-write:focus {
border-color: teal;
}
input:disabled {
border-color: silver;
}
input:disabled:focus {
border-color: gold;
}

在上面的代码中，大家使用了各种CSS伪类来对不同状态下的输入框进行不同的边框颜色设置。在上面的代码中，大家使用了onblur属性来定义一个输入框在失去焦点时的样式。这将很有用，因为当用户无意中离开输入框时，大家可以向他们提供反馈。

总之，在CSS中使用onblur属性可以帮助大家在元素失去焦点时进行样式调整，这对于验证表单等任务非常有用。