javascript - Bootstrap中带有一个边框的多个输入元素
问题描述
[更新/已解决]
我正在尝试在引导程序中的表单组内的多个输入之间设置一个边框,但该边框仅在没有焦点和最后一个输入时才有效。我的期望边界工作既集中又不集中。
.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>
如何解决?谢谢。
解决方案
您可以将以下内容添加到您的 CSS;
.form-control:focus {
position: relative;
z-index: 1;
}
它将重点输入置于其他输入之上。因此焦点轮廓(发光)将完全可见。
推荐阅读
- ios - 带有外部站点的 Ionic 4 ion-content iframe 使用粘性标头
- google-analytics - 谷歌标签管理器不跟踪链接点击图像和图标
- sql - 多列的 SELECT 和 INSERT 之间的竞争条件
- google-apps-script - 使用触发器根据 X 列中的值移动行
- reactjs - 反应导航抽屉 OnPress 未正确触发
- javascript - 我如何使用 javascript fetch api 插入数据
- javascript - 如何将画布图像从 javascript 上传到 Django
- python - 解析通过fromfile从二进制读取的numpy列表
- python - 如何从没有 html 类的单行文本中提取信息?
- jquery - 页面加载后如何停止 JQuery 加载器?