如何修改Bootstrap搜索框的Placeholder、输入文本与边框颜色

你只需在现有代码的Bootstrap样式引入后添加自定义CSS即可覆盖默认样式，实现三个元素的蓝色修改需求，具体实现如下：

核心自定义样式 #

/* 1. 修改placeholder提示文字为蓝色，兼容各主流浏览器 */
#myInput::placeholder { /* 标准语法 */
  color: #007bff;
  opacity: 1; /* 火狐默认会降低透明度，加这个保证颜色正常 */
}
#myInput::-webkit-input-placeholder { /* Chrome/Safari/Edge */
  color: #007bff;
}
#myInput::-moz-placeholder { /* 火狐浏览器 */
  color: #007bff;
  opacity: 1;
}
#myInput:-ms-input-placeholder { /* IE10+ */
  color: #007bff;
}

/* 2. 修改输入框内输入的文本颜色为蓝色 */
#myInput {
  color: #007bff;
  /* 3. 修改搜索框默认边框为蓝色 */
  border-color: #007bff;
}

/* 可选：修改输入框聚焦时的边框和阴影为蓝色，避免默认灰色边框效果 */
#myInput:focus {
  border-color: #0056b3;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

完整修改后代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    /* 1. 修改placeholder提示文字为蓝色，兼容各主流浏览器 */
    #myInput::placeholder { /* 标准语法 */
      color: #007bff;
      opacity: 1; /* 火狐默认会降低透明度，加这个保证颜色正常 */
    }
    #myInput::-webkit-input-placeholder { /* Chrome/Safari/Edge */
      color: #007bff;
    }
    #myInput::-moz-placeholder { /* 火狐浏览器 */
      color: #007bff;
      opacity: 1;
    }
    #myInput:-ms-input-placeholder { /* IE10+ */
      color: #007bff;
    }

    /* 2. 修改输入框内输入的文本颜色为蓝色 */
    #myInput {
      color: #007bff;
      /* 3. 修改搜索框默认边框为蓝色 */
      border-color: #007bff;
    }

    /* 可选：修改输入框聚焦时的边框和阴影为蓝色，避免默认灰色边框效果 */
    #myInput:focus {
      border-color: #0056b3;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
  </style>
  </head>
  <body>
  
  <div class="container mt-3">
   <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <div id="myDIV" class="mt-3">
  
</body>
</html>

说明 #

• 这里使用的#007bff是Bootstrap默认的主题蓝色，你可以根据需要替换为其他蓝色色值
• 聚焦状态的样式为可选添加，若不需要可以删除对应代码段

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