如何创建圆形搜索框

Question

我有一个大小为 190x30 像素的 div 和一个相同的背景图像。背景图片是一个圆角矩形，看起来不错。当我将文本字段放在 div 中时，背景会垂直重复，因此出于某种原因，搜索框需要 60 像素的垂直空间…为什么？我应该补充一点，它在 DreamWeaver 中显示正确，但在 Chrome 或 IE 中却没有。

原文由 Sam Clark 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS：

 .round {
    width: 100%;
    border-radius: 15px;
    border: 1px #000 solid;
    padding: 5px 5px 5px 25px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.corner {
    position: absolute;
    top: 3px;
    left: 5px;
    height: 20px;
    width: 20px;
    z-index: 10;
    border-radius: 10px;
    border: none;
    background: #000; /* Set the bg image here. with "no-repeat" */
}

.search {
    position: relative;
    width: 190px;
    height: 30px;
}

HTML :

 <form id="search-form">
    <div class="search">
      <input type="text" name="search" class="round" />
      <input type="submit" class="corner" value="" />
    </div>
</form>

演示：http: //jsfiddle.net/Bh4g3/

原文由 KBN 发布，翻译遵循 CC BY-SA 3.0 许可协议