css中椭圆形搜索框

CSS中的椭圆形搜索框一直是网页设计中十分流行的一种元素。它既美观又实用，可以很好地满足用户需求。

.search-box {
    position: relative;
    width: 300px;
    height: 30px;
    border-radius: 20px;
    background: #eee;
}

.search-box input {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    padding: 0 50px 0 20px;
    font-size: 14px;
    background: transparent;
    outline: none;
}

.search-box button {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    height: 100%;
    width: 50px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: #007bff;
} 

上面是一个简单的椭圆形搜索框的CSS代码示例。我们通过设置相对定位和宽高属性来定义搜索框的基本宽高和位置。接着，通过设置边框半径和背景颜色来实现椭圆形效果。

我们在搜索框中添加了一个输入框和按钮元素。通过设置绝对定位和宽高属性来让它们与搜索框重合。在输入框中，我们设置了边框和内边距，使其具有相应的样式和间距。为了让输入框透明，我们将其背景设置为transparent。

最后，我们给按钮设置了一个特殊的背景颜色和字体颜色，使其在搜索框中显眼易懂。搜索框就完成了！