代码之家 › 专栏 › 技术社区 › Abu Ayyub

引导中具有一个边框的多个输入元素

twitter-bootstrap-3 css html jquery javascript

Abu Ayyub · 技术社区 · 6 年前

[更新/解决]

我正在试着设置 一个边框 在引导程序中窗体组内的多个输入之间,但边框仅在不聚焦和最后一个输入之间工作。我的期望是边境工作既专注又不专注。

.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 回复 | 直到 6 年前

Bart 6 年前

您可以将以下内容添加到css中:;

.form-control:focus { position: relative; z-index: 1; }

它将集中的输入置于其他输入之上。因此,焦点轮廓(光晕)将完全可见。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前