Question

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

我正在尝试通过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>

但是它不起作用。因为我的文本框需要圆角，所以对我来说似乎很难实现。还有其他技巧可以解决吗？如何使视图符合预期？请帮忙。预先感谢。

Answer 1

使用

检查更新的更改

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>

Answer 2

input#your-txt-box{
  
  border:5px solid #fff;
  border-right-color:#1f2225;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  /*box-shadow:inset 0px 0px 1px 1px #000;*/
  width:200px;
  box-sizing:border-box;
}
div#search-box-containers{
  background-color:#1f2225;
  padding:5px; 
  width:400px;
 }
 div#search-box-containers>div{
   border:5px solid #3f2031;
   display:flex;
   background-color:#fff;
   padding-top:5px;
   padding-bottom:5px;
   }
   select#your-drop-down-menu{
     border:5px solid #fff;
     border-left-width:0px;
     margin-left:0px;
     width:200px;
     box-sizing:border-box;
   }

<div id="search-box-containers">
<div>
  <input type="text" id="your-txt-box"/><select id="your-drop-down-menu">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

</div>

文字输入之间的垂直线

2 个答案: