文本输入之间的垂直线

问题描述 投票:-1回答:2

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

我试图通过hss中的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>

但它没有用。因为我的文本框需要圆角,所以对我来说似乎很难实现。还有其他技术可以解决这个问题吗?如何按预期制作视图?请帮忙。提前致谢。

html css html5 css3 twitter-bootstrap-3
2个回答
3
投票

检查更新的更新

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>

0
投票

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>
© www.soinside.com 2019 - 2024. All rights reserved.