搜索框沒有得到位於CSS3

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邊距-100％的搜索框是不會起來。它在-10％之後停止上漲。任何幫助將不勝感激。提前致謝。 :)

來源

2016-03-02 Sam hawkz

嘗試將位置更改爲相對，並嘗試使用px值而不是百分比值調整頂部邊距 –

您嘗試px？ – mmativ

是的，我嘗試過，但搜索框移動到值-10px之後，無論我增加多少像-100px它只是不上去 –

使用「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; 
}

來源

2016-03-02 05:05:42 WisdmLabs

搜索框沒有得到位於CSS3

回答

相關問題