html - 保留标签元素会阻止我的搜索栏 Angular 变圆？

Question

问题

如果我保留我的 label 元素(根据我的阅读，每个 input 元素都应该有一个 label 元素，即使你没有使用它，对于残疾用户)，我的搜索左侧的框 Angular 未圆化。

此外，您还可以看出(如果您仔细观察)我右侧的搜索按钮与搜索栏的其余部分没有完全对齐。

删除整个 label 元素，它看起来非常好。但是，我想确保我正在练习良好的编码方式/行为。

如何使我的搜索栏看起来像您删除 label 元素时的样子，同时仍然使用 label 元素？

疑难解答

• 我曾尝试使用 CSS 为整个栏设置样式，但无济于事。
• 我尝试放置 input 元素、button 元素和label 元素内的 span 元素无效。

我的代码

JSFiddle

Answer 1

我看到基于第一个或最后一个 child 的 Bootstrap 目标类名称。

.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child)

和

.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child)

这似乎在 _border-radius.scss 中。我不完全确定他们为什么要这样做，但我确实看到这是添加边框所需要的。所以基本上，您需要具有 border-radius 的元素只有在它是第一个元素时才会接收这些样式。

只需切换:
<input class="form-control" id="search-bar" placeholder="This bar has rounded corners only on the right side.">
<label for="search-bar" class="sr-only"></label>