Javascript 更改搜索框的外观_Javascript_Html_Css

Javascript 更改搜索框的外观

javascript html css

Javascript 更改搜索框的外观,javascript,html,css,Javascript,Html,Css,我在让搜索框看起来像我想要的一样时遇到问题我的CSS代码： #searchform { position: relative; padding: 5px; } HTML代码： <body class="home"> <div id="container"> <header id="masthead"> <h1><p>Testing</p></h1></header> <nav class=

我在让搜索框看起来像我想要的一样时遇到问题

我的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>


测试

CSS

HTML（改为此）


选中此项
HTML
你有什么问题？它应该看起来怎么样？看起来怎么样？另外，你的图片链接也被破坏了。在网上有很多这样的例子。在发帖前快速搜索谷歌搜索总是有益的。
.hey { border:1px solid #efefef; padding:7px; font:normal 14px Tahoma; }

<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>

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

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;
}