如何用HTML和CSS修改搜索框点击边框变色及占位符字体？

针对你需要的两处样式修改，直接在现有代码基础上调整即可，以下是修改后的完整代码：

完整代码 #

CSS #

/* 调整占位符字体：保留FontAwesome用于图标，添加自定义字体给文本 */
.searchInput::-webkit-input-placeholder {
  font-family: FontAwesome, Arial, sans-serif; /* 可替换为你需要的字体 */
  font-weight: normal;
  overflow: visible;
  vertical-align: top;
  display: inline-block !important;
  padding-left: 2%;
  padding-top: 1%;
  color: #9D9494;
}

.searchInput {
  border: 1px solid white;
  border-radius: 5px;
  width: 39%;
  height: 5%;
  padding: 0px;
  font-size: 20px;
  margin-left: 60%;
  margin-top: 2%;
  margin-bottom: 5%;
  /* 可选：添加过渡效果让边框颜色变化更平滑 */
  transition: border-color 0.3s ease;
}

/* 聚焦时设置蓝色边框，移除浏览器默认轮廓 */
.searchInput:focus {
  border-color: #007bff; /* 可替换为你需要的蓝色Hex值 */
  outline: none;
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<input class="searchInput" type="text" placeholder=" &#61442; search " /> <br />

关键修改说明 #

• 聚焦边框变色：通过:focus伪类匹配输入框获得焦点的状态，设置border-color为目标蓝色，同时移除浏览器默认的outline避免样式冲突；额外添加的transition属性让颜色变化更平滑，可根据需求移除。
• 占位符文本字体修改：在占位符的font-family属性中，将FontAwesome放在首位保证图标正常渲染，后续添加你需要的字体（示例中用Arial, sans-serif），这样“search”文本就会使用指定字体显示。

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