Question

我想在文本输入框的起始部分显示搜索图标。

目前我的代码是这样的:

<div id="search-icon"></div>
<input type="text" name="search" id="search"/>

和我的CSS:

#search-icon {
    display:inline-block;
    background-color:#455a21;
    height:60px;
    width:60px;
    border:thin solid black;
    border-radius:30px;
    z-index:100;
}

input#search {
    position:relative;
    top:-25px;
    left:-30px;
    padding:10px;
    padding-left:35px;
    border-radius:20px;
    border:thin solid #6d6e71;
    z-index:1;
}

它向右显示 div 位置, 但是在实际文本框下方。当我将搜索图标位置更改为绝对时, 它会破坏我的定位。

我该怎么打?

Answer 1

你可以用两者的相对位置来解决它。但只需改变它们的z-index。

#search-icon {

background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
position: absolute;
z-index: 2;
}

input#search {
position:absolute;
top:15px;
left:30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;}

这是您正在寻找的 < a href=> "http://jsfiddle.net/TyVBp/6" rel="no follow" >这里

Answer 2

你是说在#searing的输入上要有搜索象子吗?

例如:http://jsfidle.net/52YfE/ ?

Answer 3

我不知道你到底想要什么,但看看这个 "http://jsfidle.net/V8AZE/"rel="nolfollow">http://jsfidle.net/V8AZE/

友情链接