點擊搜索框中的位置不正確的CSS

Question

我使用codepen創建的搜索框，

這裏是代碼：

.search-box { 
 
    height: 60px; 
 
    font-size: 55px; 
 
    display: inline-block; 
 
    font-family: "Lato"; 
 
    font-weight: 100; 
 
    border: none; 
 
    outline: none; 
 
    color: #555; 
 
    padding: 3px; 
 
    padding-right: 60px; 
 
    width: 0px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background: none; 
 
    z-index: 3; 
 
    transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000); 
 
    cursor: pointer; 
 
} 
 
input[type="text"]:focus:hover { 
 
    border-bottom: 1px solid #BBB; 
 
} 
 
input[type="text"]:focus { 
 
    width: 700px; 
 
    z-index: 1; 
 
    border-bottom: 1px solid #BBB; 
 
    cursor: text; 
 
} 
 
input[type="submit"] { 
 
    height: 127px; 
 
    width: 53px; 
 
    display: inline-block; 
 
    color: red; 
 
    float: right; 
 
    background: url("http://s18.postimg.org/f4t3rukcl/icon.png")center center no-repeat; 
 
    border: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 0; 
 
    cursor: pointer; 
 
    cursor: pointer; 
 
    transition: opacity .4s ease; 
 
} 
 
input[type="submit"]:hover { 
 
    opacity: 0.8; 
 
}

<div id="wrap"> 
 
    <form action="" autocomplete="on"> 
 
    <input id="search" name="search" class="search-box" type="text" placeholder="What're we looking for ?"> 
 
    <input id="search_submit" value="" type="submit"> 
 
    </form> 
 
</div>

這裏是DEMO

當我點擊該圖標，它不能正常工作..在某處點擊圖標，它的作品。

我可以知道，如何解決？

感謝，

Answer 1

要正確，我認爲工作。你也應該使用jquery。

find demo here

$('#search_submit, .search-box').focus(function(){ 
    $('.search-box').addClass('search-width'); 
}); 
$('#search_submit, .search-box').blur(function(){ 
    $('.search-box').removeClass('search-width'); 
}); 

Answer 2

添加此CSS

.search-box{top:28px} 

如果不嘗試這種

input[type="submit"] {height: 68px;} 

Answer 3

你有足夠的選擇來實現這個功能。你有沒有試過按鈕高度到height:74px？

.search-box { 
 
    height: 60px; 
 
    font-size: 55px; 
 
    display: inline-block; 
 
    font-family: "Lato"; 
 
    font-weight: 100; 
 
    border: none; 
 
    outline: none; 
 
    color: #555; 
 
    padding: 3px; 
 
    padding-right: 60px; 
 
    width: 0px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background: none; 
 
    z-index: 3; 
 
    transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000); 
 
    cursor: pointer; 
 
} 
 
input[type="text"]:focus:hover { 
 
    border-bottom: 1px solid #BBB; 
 
} 
 
input[type="text"]:focus { 
 
    width: 700px; 
 
    z-index: 1; 
 
    border-bottom: 1px solid #BBB; 
 
    cursor: text; 
 
} 
 
input[type="submit"] { 
 
    height: 74px; 
 
    width: 53px; 
 
    display: inline-block; 
 
    color: red; 
 
    float: right; 
 
    background: url("http://s18.postimg.org/f4t3rukcl/icon.png")center center no-repeat; 
 
    border: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 0; 
 
    cursor: pinter; 
 
    cursor: pointer; 
 
    transition: opacity .4s ease; 
 
} 
 
input[type="submit"]:hover { 
 
    opacity: 0.8; 
 
}

<div id="wrap"> 
 
    <form action="" autocomplete="on"> 
 
    <input id="search" name="search" class="search-box" type="text" placeholder="What're we looking for ?"> 
 
    <input id="search_submit" value="" type="submit"> 
 
    </form> 
 
</div>

這似乎爲我工作在FF

Answer 4

試試這個

form { 
    position: relative; 
} 

input[type="submit"] { 
    z-index:9; 
}