点击搜索框中的位置不正确的CSS

问题描述：

这里是代码：

.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

当我点击该图标，它不能正常工作..在某处点击图标，它的作品。

我可以知道，如何解决？

感谢，

取出填充值，并检查相同的:) –

有人能帮助？谢谢 – pcs

答

要正确，我认为工作。你也应该使用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'); 
});

是可能的？和你的演示仍然是我需要的东西,,谢谢.. – pcs

我需要像这样http://codepen.io/CBeghin/pen/HeuiF/ ..只是不同的是，我换了搜索icon.thanks – pcs

哦..只那。 [检查你的小提琴中的变化]（http：// jsfiddle。net/w8xzr2n1/6 /） [代码的变化]（http://jsfiddle.net/w8xzr2n1/5/） – locateganesh

答

添加此CSS

.search-box{top:28px}

如果不尝试这种

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

好的..但是当再次点击图标时，它不能正常工作？ ..如果再次点击图标以外的作品..谢谢.. – pcs

不，它是不正常工作:(谢谢 – pcs

@saina我想你检查jsfiddle？因为结果文本z-index更多的搜索图标但是如果你在项目中应用这个css后面临这个问题，让我知道 – vas

答

你有足够的选择来实现这个功能。你有没有试过按钮高度到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 enter image description here

它不起作用..当再次点击图标..谢谢 – pcs

@Saina你使用的是哪种浏览器？ – Muhammed

firefox ........ – pcs

答

试试这个

form { 
    position: relative; 
} 

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

将来，请务必提供解答与您的答案。没有jQuery的 – EternalHour

点击搜索框中的位置不正确的CSS

相关推荐