HTML/CSS问题：输入框边框半黑半灰，如何改为浅灰色？

我正在学习HTML/CSS，尝试复刻谷歌搜索页面，目前遇到输入框边框颜色异常的问题——一半黑色一半灰色。已经尝试修改border-color但无效，想知道原因，以及如何把整个输入框边框改成浅灰色。

现有代码 #

CSS

.logo {
  margin-left: 70px;
}

.search {
  width: 600px;
  padding-left: 15px;
  text-align: left;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 50px;
  border-color: rgb(159, 159, 159);
  box-shadow: 10px 5px 5px rgb(202, 202, 202);
}

HTML

<img class="logo" src="mothers-day-2024-may-12-6753651837110364-ldrk.png">
<input class="search" type="textbox" placeholder="Search Google or type a URL">

问题原因 #

只单独设置border-color无法完全覆盖浏览器对输入框的默认边框样式。浏览器默认会给输入框设置border-style（通常为inset）和固定的border-width，仅修改颜色会导致默认样式与自定义颜色冲突，出现半黑半灰的异常显示。

解决方案 #

使用border简写属性，一次性指定边框的宽度、样式和颜色，彻底覆盖浏览器默认样式。同时可以调整阴影效果，让整体更贴近谷歌搜索框的视觉表现：

修改后的CSS代码：

.logo {
  margin-left: 70px;
}

.search {
  width: 600px;
  padding: 10px 15px; /* 合并上下内边距，写法更简洁 */
  font-size: 20px;
  border-radius: 50px;
  /* 统一设置边框：1px宽度、实线样式、浅灰色 */
  border: 1px solid rgb(159, 159, 159);
  /* 替换为更柔和的阴影，避免原阴影的生硬感 */
  box-shadow: 0 1px 6px rgba(32, 33, 36, .28);
}

说明 #

• border: 1px solid rgb(159, 159, 159) 直接定义了完整的边框属性，确保边框全为浅灰色实线，消除默认样式的干扰。
• 合并内边距为padding: 10px 15px，代码更简洁，效果和原设置一致。
• 调整后的阴影更接近谷歌搜索框的柔和效果，避免原阴影可能带来的视觉杂乱。

内容的提问来源于stack exchange，提问作者Jason3132