0

テキスト入力ボックスの先頭に検索アイコンを表示したい。

現在、私のコードは次のようになっています。

<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が表示されますが、実際のテキストボックスの下にあります。検索アイコンの位置を絶対位置に変更すると、位置が台無しになります。

どうすれば交換できますか？

4

3 に答える 3

3

両方の相対位置を使用して解決できます。ただし、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;}​

これはあなたがここで探しているものですか

于 2012-05-23T09:09:08.330 に答える
0

あなたが正確に何を望んでいるのかわかりませんが、これをチェックしてくださいhttp://jsfiddle.net/V8AZE/

于 2012-05-23T09:16:48.993 に答える
0

入力#検索の上に検索アイコンを配置することについて話しているのですか?

このような: http://jsfiddle.net/52YfE/ ?

于 2012-05-23T09:13:49.083 に答える