Question

我有一个CSS类，它提供输入字段焦点的转换，结合JQuery来验证输入。验证工作完美，但我也希望转换根据输入是否成功改变焦点上的颜色。

这是我的过渡课

.bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: #337ab7;
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}

我尝试过使用似乎无效的.has-error

.has-error .bar::before {
  background: #d9534f;
  left: 0;
  width: 100%;
}

我也尝试使用input:invalid，但这只涉及HTML验证而不是库的验证。我已经尝试过查看许多示例以寻求帮助，但我无法管理。例如：http://formvalidation.io/examples/changing-success-error-colors/

基本上，如果字段无效，同时仍保留错误消息，则目标是使转换栏在字段焦点处更改为红色。

非常感谢任何帮助：）

Answer 1

这里有一个小提琴，我认为你做的是： https://jsfiddle.net/ColiniloC/f9kshd1c/

<强> HTML：

<label class='bar'>
    <input type='text' />
</label>

<强> CSS：

.bar{
  display: inline-block;
  padding-bottom: 0.125rem;
  position: relative;
}

.bar::after{
    content: '';
    height: 0.125rem;
    width: 0;
    left: 50%;
    bottom: 0;
    position: absolute;
    background: #337ab7;
    -webkit-transition: left 0.28s ease, width 0.28s ease;
    transition: left 0.28s ease, width 0.28s ease;
    z-index: 2;
}

.bar.has-error::after{
  background: #d9534f;
  left: 0;
  width: 100%;
}

一些值得注意的项目发生了变化：

您需要在.bar :: after的封闭框中留一些空格因为它需要那个空间。（否则盒子会跳如果它有溢出：隐藏＆＃39;酒吧不可见。
栏应该是底部：0;

您也可以将红色移动到条形图“非错误”状态。状态，因为它无论如何都不可见。（取决于你想要的全部效果。

基于JQuery验证更改CSS类

1 个答案: