Question

input[type=text] {
  margin-left: 63%;
  margin-top: -100%;
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: black;
    background-image: url('searchicon.png');

    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 150px;
}

  <form>
      <input type="text" name="search" placeholder="Search..">
    </form>

即使在puttin margin-top -100％之后，搜索框也没有上涨。它在-10％后停止上升。任何帮助将受到高度赞赏。提前致谢。：）

Answer 1

使用“position：relative”和“top：-100px”。它会移动您的搜索框向上移动。您可以根据需要增加“顶部”值。

input[type=text] {
margin-left: 63%;
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: black;
background-image: url('searchicon.png');

background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
position: relative;
top: -100px;
}

input[type=text]:focus {
width: 150px;
}

搜索框未定位在css3中

1 个答案: