Question

这是我的问题的可视化：

我使用CSS将边框设置为浅灰色，但是在转换为浅灰色之前，它们默认为黑色边框。如果有人能给我一个提示，我真的很感激！

HTML文件

<div class="container-fluid">
  <div class="container">
    <form>
      <div class="row page-header">
        <div class="col-lg-10">
          <div class="form-group">
            <input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-7">
          <div class="form-group">
            <div class="input-group input-group-lg">
              <div class="input-group-btn">
                <button type="button" id="Remove-Button" class="btn btn-default" aria-label="Remove">
                  <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                </button>
              </div>
              <input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here">
              <div class="input-group-btn">
                <button type="button" id="Add-Button" class="btn btn-default" aria-label="Add">
                  <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

CSS边框部分

/*Take away default black borders*/
input[type="text"] {
  outline: none;
  box-shadow: none !important;
  border: none;
}

/*Put grey borders when hover or click on input box*/
input[type="text"]:focus,
input[type="text"]:hover {
  border: 1px solid #cccccc;
  border-radius: 8px;
}

我正在使用Bootstrap并在Chrome上运行我的HTML文件，如果相关的话。

JSFiddle of my problem

Answer 1

如果你改变：

input[type="text"]:focus,
input[type="text"]:hover {
  border: 1px solid #cccccc;
  border-radius: 8px;
}

要：

input[type="text"]  {
  border: 1px solid #cccccc;
  border-radius: 8px;
}

您的灰色轮廓仍然存在，颜色故障被删除，但在焦点上，您的轮廓确实会变为蓝色。

Answer 2

只需添加transition:none;

input[type="text"]:focus,
    input[type="text"]:hover {
      border: 1px solid #cccccc;
      border-radius: 8px;
      transition:none;
    }

Bootstrap：在应用CSS应用灰色之前输入文本边框变黑？

2 个答案: