Html 如何创建圆形搜索框

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

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>

---

演示：

要防止背景重复，请使用以下CSS声明：

#element {
    background-repeat: no-repeat;
}

你可以试试这个 CSS

HTML

您可以在div“divName”中放入任何内容。

您可以这样做：

CSS:

HTML:

<div class="example">
         <input type="text" placeholder="Search..">
       </div>

我已经尝试过了，但我希望在该div/input中有一个图像，单击该图像后，提交表单。这只是一个快速解决方案，您可以将标签设置为“corner”类，并根据需要将其设置为bg图像。请发布与问题相关的代码。理想情况下，除了问题正文中的代码之外，请添加问题的示例。它将帮助我们帮助您。您可以使用

背景位置调整背景图像的位置：0px 50px或类似代码（请参阅）。如果您发布代码，我们将更容易理解问题。
<div id="divName"><input type="text" ></div>

.example input[type=text] {
       border-radius: 25px;
      }

<div class="example">
         <input type="text" placeholder="Search..">
       </div>