Jquery 输入框设计是必需的_Jquery_Html_Css

Jquery 输入框设计是必需的

jquery html css

Jquery 输入框设计是必需的,jquery,html,css,Jquery,Html,Css,我需要一个搜索框，这将像下面的图片给出了一个利肯我设计了一个输入字段，在下面的代码中给出。我想要的是链接中的关于图片。我想有一个字段完全像上面的图片，但 HTML <html> <head> <style> /*...........Search Products Start.............*/ #searchbox { background-color: #eaf8fc; backgroun

我需要一个搜索框，这将像下面的图片给出了一个利肯

我设计了一个输入字段，在下面的代码中给出。我想要的是链接中的关于图片。我想有一个字段完全像上面的图片，但

HTML
<html>
    <head>
            <style>


/*...........Search Products Start.............*/

#searchbox
{
    background-color: #eaf8fc;
    background-color: #fff;
    border-radius: 5px;    
    border-width: 3px;
    border-style: solid;
    border-color: #EDF1F2;            
    width: 300px;
    height: 30px;
    padding: 1px;

    overflow: hidden; /* Clear floats */
}
#search, 
#submit {
    float: left;
}

#search {

    height: 30px;
    width: 200px;
    border:1px solid #fff;
    font: normal 13px 'trebuchet MS', arial, helvetica;
    background: #fff;

}

/* ----------------------- */

#submit
{       
    background-color: #B6C2C9;    

    border-radius:2px;
    height: 26px;
    margin: 1px 0 0 8px;
    padding: 0;
    text-transform: uppercase; 
    width: 90px;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color: #23441e;


}
/*............Search Products End............*/




            </style>
        </head>

    <body>

    <form id="searchbox" action="">
    <input id="search" type="text" placeholder="Type here">
    <input id="submit" type="submit" value="Products">
</form>

    </body>

</html>

HTML
/*搜索产品开始*/
#搜索框
{
背景色：#eaf8fc；
背景色：#fff；
边界半径：5px；
边框宽度：3倍；
边框样式：实心；
边框颜色：#EDF1F2；
宽度：300px；
高度：30px；
填充：1px；
溢出：隐藏；/*清除浮动*/
}
#搜索，
#提交{
浮动：左；
}
#搜寻{
高度：30px；
宽度：200px；
边框：1px实心#fff；
字体：标准13px“投石机MS”，arial，helvetica；
背景：#fff；
}
/* ----------------------- */
#提交
{       
背景色：#B6C2C9；
边界半径：2px；
高度：26px；
利润率：1px08px；
填充：0；
文本转换：大写；
宽度：90px；
光标：指针；
字体：粗体14px Arial，Helvetica；
颜色：#23441e；
}
/*搜索产品结束*/

请让我知道我到底错过了什么，亲爱的。

如果你能在这方面提供帮助，我将不胜感激。我想我需要更多的CSS，但不幸的是我的CSS不是很好，这里有一个起点：谢谢你的回复，亲爱的，如果你再看一次图片的话。该按钮带有向下箭头，看起来像下拉菜单。在这种情况下，请帮助我如何将此添加到工作中。检查此@user3750236我不是免费顾问，这就是为什么我在评论中给了你一个起点，而不是在回答中给了你一个完整的解决方案。我不能在Div标记上应用CSS，因为我将更改我的所有设置。我们能否具体针对该领域的类别。

<input id="search"type='search' placeholder="Type here"/>
<input type="submit" value="Products" />
<hr>
<input type='search'results id="none"/>

input[type=search]{
    -webkit-appearance: none!important;
    color: gray;
    cursor:text;
    display: block;
    outline: 0;
    border:1px solid #999da0;
    font: normal 13px 'trebuchet MS', arial, helvetica;
    background: #fff;
    box-shadow: 0 0 2px 4px #ced2d5;
    border-radius: 5px;
    overflow: hidden;
    width:300px;
    padding:6px 20px;
    background: #fff url('http://cdn.sstatic.net/img/share-sprite-new.png?v=204b1e0e421b') no-repeat -271px -89px !important;
}
input[type="search"]::-webkit-input-placeholder {
  color: #ccc;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 16px;
width: 16px;
background: red;
cursor:pointer!important;
z-index:2;
margin:-2px -10px 0 0;
    content:'▼';
    color:gray;
}
input[type=submit]{
    position:absolute;
    border-radius:4px;
    margin: -30px 0 0 188px;
    padding: 4px 25px 2px 4px;
    text-transform: uppercase;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color: white;
    border:none;
    outline:none;
}
#none{
    background: none!important;
    padding:none!important;
    box-shadow:none!important;
}