Html 如何创建圆形搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10463217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Create Rounded Search Box
提问by Sam Clark
I have a div with a size of 190x30 pixels, and a background image of the same. The background image is a rounded rectangle and it looks good. When I put the text field in the div, the background repeats vertically, so for some reason, the search box is requiring 60 px of vertical space... WHY? I should add that in DreamWeaver it appears correctly, but in Chrome or IE, it doesn't.
我有一个大小为 190x30 像素的 div 和相同的背景图像。背景图像是一个圆角矩形，看起来不错。当我将文本字段放在 div 中时，背景垂直重复，因此出于某种原因，搜索框需要 60 px 的垂直空间......为什么？我应该补充一点，它在 DreamWeaver 中显示正确，但在 Chrome 或 IE 中却没有。
回答by KBN
CSS:
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 :
HTML :
<form id="search-form">
<div class="search">
<input type="text" name="search" class="round" />
<input type="submit" class="corner" value="" />
</div>
</form>
Demo : http://jsfiddle.net/Bh4g3/
回答by Joe Mornin
To prevent the background from repeating, use this CSS declaration:
为防止背景重复，请使用以下 CSS 声明：
#element {
background-repeat: no-repeat;
}
回答by Jhilom
You may try this CSS
你可以试试这个 CSS
#divName { background:url("image-src) no-repeat; height:30px; width:190px; }
HTML
HTML
<div id="divName"><input type="text" ></div>
And you may put anything inside the div "divName"
你可以在 div "divName" 里面放任何东西
回答by JustA13YearOld
You could do this:
你可以这样做：
CSS:
CSS：
.example input[type=text] {
border-radius: 25px;
}
HTML:
HTML：
<div class="example">
<input type="text" placeholder="Search..">
</div>
Here's a fiddle to see how it looks like:
这是一个小提琴，看看它的样子：
.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>