Question

我在搜索框看起来像我想要的时候遇到了问题。

http://i39.tinypic.com/e8u8gn.jpg

我的CSS代码：

#searchform {
position: relative;
padding: 5px;
}

HTML代码：

<body class="home">
<div id="container">
<header id="masthead">
<h1><p>Testing</p></h1></header>
<nav class="nav-buttons" id="primary">
<ul>                 
<li id="search" style="padding-left:400px;">
<form id="searchform" action="http://www.Google.com/" method="get"><label class="screen-  reader-text" for="s"> 
</label><input id="s" type="text" placeholder="Type your search here" name="s" value="">  </input><input id="searchsubmit" type="submit" value="Search"></input></form></li>

</ul>
</nav>

Answer 1

选中 Fiddle

HTML

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

CSS

div {
    background: #e1e1e1;
    padding: 20px;
}
input {
    padding: 5px 5px;
    width: 300px;
    height: 30px;
    font-size: 16px;
    border: 1px solid #ccc;
    padding-right: 50px;
    background: #fff url(http://png.findicons.com/files/icons/1389/g5_system/16/toolbar_find.png) no-repeat;
    background-position: 330px center;
}
input:focus {
    border: 1px solid #ccc;
}

Answer 2

CSS

.hey { border:1px solid #efefef; padding:7px; font:normal 14px Tahoma; }

HTML（改为此）

<input id="s" class="hey" type="text" placeholder="Type your search here" name="s" value="">  </input>
<input id="searchsubmit" type="image" src="search.gif"</input></form></li></input>

享受！

更改搜索框的外观

2 个答案: