前提条件
- 我有 searched 用于重复或关闭的问题
- 我有 validated 任何HTML以避免常见问题
- 我读过 contributing guidelines
描述问题
问题:当与 input-group 类一起使用时，输入(datalist)的外部右上角和右下角边框半径未应用。
简短: border-top-right-radius 和 border-bottom-right-radius 属性设置为0,而不是默认值 --bs-border-radius 。
代码：
<div class="input-group">
<span class="input-group-text">#</span>
<input list="datalistOptions" class="form-control datalist" placeholder="Choose or type an option">
<datalist id="datalistOptions">
<option value="abc">abc</option>
<option value="...">...</option>
<option value="xyz">xyz</option>
</datalist>
</div>预览：
简化的测试用例
修复 :
手动设置相应的半径时，它可以正常工作：
input.datalist {
border-top-right-radius: var(--bs-border-radius) !important;
border-bottom-right-radius: var(--bs-border-radius) !important;
}预览：
您在哪个操作系统上看到问题？
macOS
您在哪个浏览器上看到问题？
Chrome
3条答案
按热度按时间pgccezyw1#
使用输入组时，边框半径样式将应用于具有
class="input-group"的元素的第一个和最后一个子元素。在您的情况中，边框半径没有正确显示，因为最后一个子元素实际上是<datalist>而不是<input>,更改这两个标签的顺序应该解决这个问题。hgqdbh6s2#
使用输入组时，边框半径样式会应用到具有
class="input-group"的元素的第一个和最后一个子元素上。在您的案例中，边框半径没有正确显示，因为最后一个子元素实际上是<datalist>而不是<input>,更改这两个标签的顺序应该可以解决问题。是的，改变顺序是有意义的。但是，我想这值得在官方文档中提及。谢谢。
jaql4c8m3#
我同意。我会创建一个PR将其添加到文档中。