html - 文字输入之间的垂直线

我正在尝试创建一个搜索框，如下所示：文本框和下拉列表显示为单个元素，并由一条小的垂直线分隔。如下图所示。我专注于实现“名称”和“位置”之间的垂直线

我试图通过html中的CSS实现此功能。我试图将“名称”文本框的右边框显示调整为可见，并删除所有其他边框。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <form>
    <div class="form-group" style="display:flex; background-color: ;">
      <input type="text" class="form-control" style="border:none; border-right: 1px solid black; border-radius:50px;">
      <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: white; color:black; border:none">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu" style="background-color: white;">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div></div>
  </form>
</div>

</body>
</html>

但这是行不通的。由于我的文本框需要圆角，因此对我来说似乎很难实现。还有其他技巧可以解决吗？如何使视图符合预期？请帮忙。提前致谢。

最佳答案

检查更新的更改

border-radius:50px 0px 0px 50px;

和

线使用

.dropdown:before{
  position:absolute;
  content:'';
  left:0px;
  height:28px;
  width:2px;
  background:#000000;
  top:3px;
}

.dropdown .btn{
  height:34px;
}

.form-group input:focus,.form-group .dropdown:focus,.form-group button:focus{
  outline:0px;
  box-shadow: none;
}



.dropdown:before{
  position:absolute;
  content:'';
  left:0px;
  height:28px;
  width:2px;
  background:#000000;
  top:3px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <form>
    <div class="form-group" style="display:flex; background-color:#000000; height:40px; padding:3px 0px;">
      <input type="text" class="form-control" style="border:none; border-radius:50px 0px 0px 50px;">
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: white; color:black; border:none; border-radius:0px;">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu" style="background-color: white;">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
      <button class="btn btn-primary" type="button" data-toggle="dropdown" style="background-color: green; color:white; border:none; border-radius:0px 50px 50px 0px;">icon
    </div>
  </form>
</div>

</body>
</html>