如何创建圆形搜索框答案

【问题标题】：How to Create Rounded Search Box如何创建圆形搜索框
【发布时间】：2012-05-14 20:20:15
【问题描述】：

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

【问题讨论】：

请贴出与问题相关的代码。理想情况下，除了问题本身的代码之外，请添加jsFiddle 问题示例。它将帮助我们帮助您。

标签： html css textfield

【解决方案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/

【讨论】：

我试过了，但我想在那个 div/input 中有一个图像，点击它时，提交表单。
这只是一个快速的解决方案，你可以给标签“corner”类，并根据需要设置它的bg图像。

【解决方案2】：

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

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

【讨论】：

您可以使用background-position: 0px 50px; 或类似方法调整背景图像的位置（请参阅w3schools.com/cssref/pr_background-position.asp）。如果您发布代码，我们会更容易理解问题。

【解决方案3】：

你可以试试这个 CSS

#divName { background:url("image-src) no-repeat; height:30px; width:190px; }

HTML

<div id="divName"><input type="text" ></div>

你可以在 div "divName" 里面放任何东西

【讨论】：

【解决方案4】：

你可以这样做：

CSS：

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

HTML：

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

这是一个小提琴，看看它的样子：

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

<!DOCTYPE html>
<html>

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

</html>

【讨论】：