html制作一个美观的搜索框

一般情况下搜索栏就是form标签中的一个input标签。

如：

<form>
      <input type="text" placeholder="    搜索关键字">
</form>

这样生成出来的就是一个长方形的矩形框，显然不太合适。我们可以通过以下css代码来改变它的样式：

form>input{
    border-radius: 25px;　　/*设置输入框两边的边框半径，可以使两边变成弧形*/
    width: 270px;　　　　　　 /*设置输入框宽度*/
    outline: none;　　　　　　/*当鼠标点击输入框后“边框不会变蓝”*/
    background-image:url(http://xxx.xx.xxx.xx/Public/img/title_search.png);　　/*给输入框里面加一个搜索按钮的图标*/
    background-repeat: no-repeat;　　/*如果不设置这项，图标会不断重复出现*/
    background-size: 21px 21px;     /*设置图标的大小*/
    background-position: 95%;       /*对图标的位置进行定位*/
}

效果如下图：