保持标签元素可以防止我的搜索栏角落变圆？

Question

问题

如果我保留了我的标签元素（以及我所阅读的内容，每个input元素应该有一个标签元素，即使你没有使用它，对于已禁用的用户），我的搜索框也会出现问题左边没有圆角。

此外，您可以判断（如果您看得足够近）我右侧的搜索按钮与搜索栏的其余部分没有完全对齐。

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

如何在仍然使用label元素时删除label元素，使我的搜索栏看起来像它的外观？

故障排除

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

我的代码

JSFiddle

Answer 1

我看到基于第一个或最后一个孩子的引导程序定位类名。

.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>

Answer 2

请使用下面的css来应用左圆角。

#search-bar{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}