Bootsrap表格边框渐变

Question

默认情况下，单击Bootsrap表单将在边框上显示渐变色。

有没有办法将bootsrap.css或bootsrap.js修改为显示渐变的其他颜色？

以下是上图中的示例：https://jsfiddle.net/bb61c412/122/

代码：

#form-default {
  margin-top: 50px;
  width: 300px;
}
#form-green {
  border: 1px solid #000000;
  margin-top: 50px;
  width: 300px;
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />


<div class="form-group">

  <select id=form-default name="Form1" class="form-control">
    <option value="0">Form1</option>
    <option value="1">Option2</option>
    <option value="2">Option3</option>
  </select>

  <select id=form-green name="Form2" class="form-control">
    <option value="0">Form2</option>
    <option value="1">Option2</option>
    <option value="2">Option3</option>
  </select>

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

如本回答所示..

Change Bootstrap input focus blue glow

覆盖.form-control:focus蓝色光晕..

.form-control:focus {
      border-color: #FF0000;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

更新了小提琴：https://jsfiddle.net/bb61c412/123/

Answer 2

你只需要通过bootstrap覆盖这一点CSS：

.form-control:focus {
    border-color: #66AFE9;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
}

渐变的 blue 部分为rgba(102, 175, 233, 0.6)，因此请将其更改为您想要的任何内容。

Answer 3

.form-control:focus, .form-control:active, .form-control:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(0, 0, 0, 0.6);
    outline: 0 none;
}

Answer 4

这会改变边框颜色。盒阴影改变了渐变部分。添加：焦点仅在您选择它时才会发生。

#form-default:focus {
  box-shadow: 0 0 5px green;
  padding: 3px;
  margin: 5px;
  border: 1px solid red;
}

Answer 5

 .form-control
  {
   border-color: rgba(126, 239, 104, 0.8) !important;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6) !important;
   outline: 0 none !important;
  }
 .form-control:hover
  {
     border-color: blue !important;
  }

Answer 6

更改.form-control:focus蓝色光晕..

.form-control:focus{ webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6); } 更改上面的颜色代码