Bootstrap中具有一个边框的多个输入元素
Bootstrap中具有一个边框的多个输入元素
提问于 2018-05-10 17:09:47
Updated/Solved
我试图在引导中在窗体组内的多个输入之间设置一个边框，但是边框只有在没有焦点和最后一个输入时才能工作。我期望边境的工作既集中又不集中。
.container{
margin-top:20px;
width:80%;
}
.input-merge [class*="col-"]{
padding:0;
}
.form-control{
border-radius:0 !important;
}
.form-control:focus {
position: relative;
z-index: 1;
}
.input-merge div:not(:first-child) {
margin-left: -1px;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="form-group input-merge">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Input One">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Input Two">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Input Three">
</div>
</div>
</div>
</body>
怎么解决这个问题？谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-10 18:42:15
您可以添加以下内容到您的css；
.form-control:focus { position: relative; z-index: 1; }
它将集中的输入置于其他输入之上。因此焦点轮廓(辉光)将完全可见。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50278097
复制相关文章
相似问题
腾讯云开发者
