html - 输入标签的 Chrome 显示问题

Question

我有以下代码:

.searchdiv {
  width: 140px;
  height: 35px;
  margin-left: 17px;
  margin-top: 12px;
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  border-color: #707070;
}
.searchbox {
  padding: 3px;
  font-size: 16px;
  font-weight: bold;
  background-color: #121212;
  color: #6b6b6b;
  border-color: #121212;
  width: 100px;
  height: 25px;
}
.searchbox:focus {
  outline: none;
}
.maglass {
  position: fixed;
  top: 57px;
  left: 125px;
}
.maglass:focus {
  outline: none;
}

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
    </img>
  </form>
</div>

当我运行它时，它输出为:

我想知道是什么导致了黑色边框，因为我指定的颜色都不包含黑色边框。

我尝试删除 border-color 属性，但这会导致整个边框变成灰色。

Answer 1

为什么 Chrome 上会出现黑色(大概)边框？

问题是因为 Chrome 中 input 框的默认 UA 设置。该值默认设置为 inset(可以从 Developer Console 中看到)，这似乎是导致黑色的原因(它不是黑色，它似乎是半透明的黑色)在元素上插入边框。

当边框和背景颜色更改时，问题会更加明显。我在下面的代码片段中设置了一些高对比度的颜色以使其可视化。

.searchdiv {
  width: 140px;
  height: 35px;
  margin-left: 17px;
  margin-top: 12px;
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  border-color: #707070;
}
.searchbox {
  padding: 3px;
  font-size: 16px;
  font-weight: bold;
  background-color: #121212;
  color: #6b6b6b;
  border-color: #121212;
  width: 100px;
  height: 25px;
}
.searchbox:focus {
  outline: none;
}
.maglass {
  position: fixed;
  top: 57px;
  left: 125px;
}
.maglass:focus {
  outline: none;
}

/* Just for demo */

.searchbox.contrast {
  background-color: yellow;
  border-color: yellow;
}
.searchdiv {
  margin-top: 20px;
}

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
  </form>
</div>

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox contrast" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
  </form>
</div>

---

解决方案是什么？

解决这个问题很简单。只需覆盖默认的 border-style 并将其设置为 solid ，如以下代码片段所示。

.searchdiv {
  width: 140px;
  height: 35px;
  margin-left: 17px;
  margin-top: 12px;
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  border-color: #707070;
}
.searchbox {
  padding: 3px;
  font-size: 16px;
  font-weight: bold;
  background-color: #121212;
  color: #6b6b6b;
  border-style: solid;
  border-color: #121212;
  width: 100px;
  height: 25px;
}
.searchbox:focus {
  outline: none;
}
.maglass {
  position: fixed;
  top: 57px;
  left: 125px;
}
.maglass:focus {
  outline: none;
}

/* Just for demo */

.searchbox.contrast {
  background-color: yellow;
  border-color: yellow;
}
.searchdiv {
  margin-top: 20px;
}

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
  </form>
</div>

<div class="searchdiv">
  <form action="/search.njs" method="GET">
    <input class="searchbox contrast" type="text" name="query" value="" />
    <input class="maglass" type="image" src="/res/maglass.png">
  </form>
</div>