如何将搜索栏设置为胶囊形状？附当前代码求助

要把搜索栏改成胶囊形状，只需要给输入框加上border-radius属性就行，另外你现有CSS里的padding属性缺了单位，得补上才能让样式生效。

修改后的完整CSS代码：

#search {
    border: none;
    padding: 10px 20px; /* 补上px单位，否则内边距样式不生效 */
    font-size: 16px;
    text-align: left;
    display: inline-block;
    margin: 4px 2px;
    background: grey;
    border-radius: 999px; /* 关键：用大数值圆角实现胶囊效果 */
    line-height: 1.5; /* 可选优化，让文字垂直居中更美观 */
}

为什么用999px？因为这个数值远大于输入框的高度，左右边角会自动变成完美的半圆，上下边保持平直，刚好符合你要的胶囊形状。要是你想精准控制，也可以把圆角值设为输入框高度的一半（比如输入框高度30px就设15px），但用999px更通用，后续调整输入框高度也不用改圆角值。

HTML部分不需要做任何修改，保持原有结构即可。

内容的提问来源于stack exchange，提问作者Chief_Rice