我正在尝试创建一个搜索框:文本框和下拉列表显示为由一条小垂直线分隔的单个元素。如下图所示。我专注于实现“名称”和“地方”之间的垂直线
我试图通过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>
但它没有用。因为我的文本框需要圆角,所以对我来说似乎很难实现。还有其他技术可以解决这个问题吗?如何按预期制作视图?请帮忙。提前致谢。
检查更新的更新
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>
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>