Question

我想在输入文本时更改输入的颜色和相关的字形图标图标颜色但是我在输入文本时使用css更改了文本颜色但是字形图标颜色没有更改

HTML

<div class="col-sm-4">
    <input class="form-control" name="customerBidId" [(ngModel)]="createPlan.customerBidId" placeholder="Bid ID" required>
    <i class="glyphicon glyphicon-credit-card"></i>
  </div>

CSS

input:focus + .glyphicon {
  color: #39529d;
}
input, select, textarea{
  color: #39529d;
}

关于焦点glyphicon颜色和文本颜色的变化但是当焦点被移除时，文本颜色会支持但是glyphicon会恢复为默认颜色

Answer 1

实际上，您的文字颜色始终为#39529d，因为您已使用第二行CSS在input标记上对该值进行了硬编码。

如果正在关注直接上一个兄弟input，您的第一行将仅为

input:focus + .glyphicon {
  color: #39529d;
}
input:focus, textarea:focus{
  color: #39529d;
}

此代码应确保只有在元素聚焦时，您的文本才会被着色。

input + .glyphicon {
  color: #39529d;
}
input, textarea{
  color: #39529d;
}

此代码将始终为其着色。

Answer 2

使用jquery可以实现这一点，

$('#myText').blur(function(){
  if(this.value){
     $('.glyphicon').attr('style', 'color: red');
  } else {
     $('.glyphicon').attr('style', 'color: #39529d');
  }
})

input:focus + .glyphicon {
  color: red;
}
input, select, textarea{
  color: #39529d;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <div class="col-sm-4">
    <input class="form-control" id="myText" name="customerBidId" [(ngModel)]="createPlan.customerBidId" placeholder="Bid ID" required>
    <i class="glyphicon glyphicon-credit-card"></i>
  </div>

输入发短信时更改输入和fa图标的颜色

2 个答案: