带有分组图标的input-group-addon / font-awesome文本框的边框混乱
GG_Python
使用引导程序3，这是代码：
<div class="form-group">
<div class="input-group merged">
<span class="input-group-addon"><i class="fa fa-arrow-circle-right fa-fw"></i></span>
<input class="form-control" placeholder="Text to appear before..">
</div>
</div>
<div class="form-group">
<div class="input-group merged">
<input class="form-control" placeholder="Text to appear after..">
<span class="input-group-addon"><i class="fa fa-arrow-circle-left fa-fw"></i></span>
</div>
</div>
编辑：（应肖恩的要求添加css代码）：
.merged .input-group-addon {
border-right: 0px;
background-color: #FFFFFF;
}
.merged input {
border-left: 0px;
background-color: #FFFFFF;
}
这是它的外观：
请注意，第二个输入框的左右边框都丢失了。另外，在图标和文本框之间有一个垂直分隔线，在上方的框中没有。
有任何想法吗？
肖恩·莱恩（Sean Ryan）
.input-group-addon {
background-color: #fff;
}
.merged input:first-child {
border-right: 0px;
}
.merged .input-group-addon + input {
border-left: 0px;
}
所以我们在这里说的是：
如果输入是的第一个子元素.merged，请删除右边框。
如果输入是的同级.input-group-addon并且紧随其后，请删除左边框。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
input-group-addon：如何对齐宽度
- 2
带有Font-Awesome导航栏图标的Foundation 5
- 3
带有Jqplot的Font Awesome图标
- 4
Bootstrap Input-Group-Addon Durandal淘汰赛验证
- 5
如何减小 input-group-addon Bootstrap 的大小
- 6
带有Angular的HTML输入中的Font Awesome图标
- 7
如何使用.input-group-addon（Bootstrap3）控制.input-group中输入的大小？
- 8
如何使用.input-group-addon（Bootstrap3）控制.input-group中输入的大小？
- 9
在Bootstrap中使用input-group / input-group-addon对齐问题
- 10
具有group-btn和group-addon的输入组
- 11
带有 FontAwesome 图标的中心文本
- 12
使用wkhtmltopdf打印包含Font Awesome图标的HTML
- 13
如何获取Font awesome图标的Png文件？
- 14
单击时更改Font Awesome图标的颜色：CSS / JavaScript
- 15
使用wkhtmltopdf打印包含Font Awesome图标的HTML
- 16
单击时替换 Font Awesome 5 图标的 jQuery 问题？
- 17
在 ReactJS 中添加指向 Font Awesome 图标的链接
- 18
WPF中带有图像图标的文本框
- 19
设置了width：auto时，引导程序input-group-addon远离输入
- 20
在Safari中使用input-group-addon的Bootstrap工具提示故障
- 21
如何正确禁用与input-group-addon一起使用的跨度
- 22
默认asp.net mvc 5模板中的input-group-addon之前未知的间隙
- 23
在Safari中使用input-group-addon的Bootstrap工具提示故障
- 24
使用bootstrap3 input-group-addon高度进行选择
- 25
模型表单上的 Django Bootstrap input-group-addon 不分隔字段
- 26
设计带有圆形边框的聊天文本框
- 27
引导程序3中形式/ .input-group / .input-group-addon输入的glyphicon大小不正确
- 28
Bootstrap 3：使用input-group / input-group-addon和水平标签设置自定义宽度
- 29
如何使用Firefox Addon-SDK在工具栏小部件中具有自由文本输入字段（文本框）
我来说两句