我有一个大小为 190x30 像素的 div 和一个相同的背景图像。背景图像是一个圆角矩形,看起来不错。当我将文本字段放在 div 中时,背景会垂直重复,所以由于某种原因,搜索框需要 60 px 的垂直空间......为什么?我应该补充一点,它在 DreamWeaver 中显示正确,但在 Chrome 或 IE 中却没有。
问问题
40683 次
5 回答
7
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/
于 2012-05-05T15:22:57.953 回答
2
为了防止背景重复,使用这个 CSS 声明:
#element {
background-repeat: no-repeat;
}
于 2012-05-05T15:24:23.117 回答
0
你可以试试这个 CSS
#divName { background:url("image-src) no-repeat; height:30px; width:190px; }
HTML
<div id="divName"><input type="text" ></div>
你可以在 div "divName" 里面放任何东西
于 2012-05-05T18:42:50.020 回答
0
我认为这样更好:
<input placeholder="Search..." type="search" value="" id="search"
onchange="openPage()">
<script>
function openPage() {
var x = document.getElementById("search").value;
if (x === "Home") {
window.open("home.html");
}
if (x === "About") {
window.open("about.html");
}
}
</script>
于 2022-02-03T22:04:22.213 回答
0
你可以这样做:
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>
于 2018-12-12T19:43:27.403 回答