如何在input输入框中加一个搜索的小图片_仿淘宝搜索栏

weixin_39716043

于 2020-11-20 11:16:48 发布

阅读量2.3k

点赞数 1

文章标签：如何在input输入框中加一个搜索的小图片

1.写入元素内容结构

  <form >
    <input name="keyword" type="text"/>
    <span>
      <input type="image" src="./camera.png" alt="Submit" />
      <input type="submit" value="搜索"/>
    </span>
  </form>

2.去掉元素默认边框

自定义外边框把这三个元素包起来：

  form{
        width:600px;      
        height:40px; 
        line-height: 40px;     
        border:2px solid #ff3f00;      
        border-radius:20px;
      }
      input{
        border: none;
      }
      .img{
        position: relative;
        top:4px;
      }

3.调整内部元素位置

让相机和按钮向右浮动，设置输入框宽度为500px,并让框内的元素垂直居中

 input{
        border: none;
      }
      .input_area{
        width: 500px;
        margin-left: 10px;
      }
      span{
        float: right;
      }

4.设置搜索按钮的样式

      .serch{
        height: 40px;
        width: 50px;
        background-color: #ff3f00;      
        border-radius:0 20px 20px 0;
        color: white;
      }