请求为指定HTML代码编写CSS以实现匹配参考图的边框样式

你需要为指定HTML中的下拉框实现参考图里的边框效果，以下是对应的解决方案：

原始HTML代码 #

<div class="navbar1">
  <div class="select-div">
        <select name="country" class="form-control" id="country">
          <option value="USA" label="United States">United States</option>
          <option value="CN" label="Canada">Canada</option>
        </select>
        <select name="language" class="form-control" id="language">
        <option value="USA" label="English">English</option>
        <option value="Mexico" label="Spanish">Spanish</option>
      </select>
      <select name="search" class="form-control" id="search">
        <option value="search" label="Search">Search</option>
    </select>
</div>
</div>

目标效果参考图 #

实现CSS代码 #

/* 下拉框容器：设置统一外边框与布局 */
.select-div {
  border: 1px solid #cccccc;
  display: inline-flex;
  border-radius: 4px;
  overflow: hidden;
}

/* 重置下拉框默认样式 */
.form-control {
  border: none;
  border-right: 1px solid #cccccc;
  padding: 8px 14px;
  background-color: #ffffff;
  cursor: pointer;
  font-size: 14px;
}

/* 移除最后一个下拉框的右侧分隔线 */
.form-control:last-child {
  border-right: none;
}

/* 可选：鼠标悬浮效果优化 */
.form-control:hover {
  background-color: #f8f9fa;
}

说明 #

这段CSS通过给容器.select-div设置统一外边框，同时重置下拉框默认样式，用右侧分隔线替代独立边框，最后移除最后一个下拉框的右侧线，实现和参考图一致的整体边框效果。

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