0

アイコンをテキスト入力フィールドに入れようとしています。
例：
例

1 つの解決策は、background-imageを使用してから、padding-leftを使用することです。

しかし、CSSスプライトを使いたいです。次のコードを試しました：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

    .input {
        padding-left:35px; 
        width: 128px;
        background: Red;

    }



    .sprite:before{
        background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png');
        content: " ";
        position: absolute;
        height:32px;
        width:32px;
        margin: -10px 0 0 -10px;
        z-index:100;
    }


    .sprite:before {
        background-position: -32px 0;
    }

    </style>
</head>
<body>

    <input type="text" class="input sprite"></input>

</body>
</html>

私は何を間違っていますか？

4

2 に答える 2

0

何が望ましい効果になるかはわかりませんが、画像が見えないので、自分で答えるのが難しいと思います。そのため、サンプルのマークアップで明らかに間違っていることを指摘するには、:before入力要素の of 。この回答でわかるよう::beforeに、 やのような疑似要素は::afterコンテナにのみ適用できます。

マークアップを次のように変更するだけです

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

.input {
    padding-left: 35px;
    width: 128px;
    background: Red;
}

.sprite:before {
    background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png');
    content: "";
    position: absolute;
    height: 32px;
    width: 32px;
    margin: -10px 0 0 -10px;
    z-index: 100;
}

.sprite:before {
    background-position: -32px 0;
}

</style>
</head>
<body>

<div class="sprite">
    <input type="text"class="input"></input>
</div>

</body>
</html>

あなたが考えていることの良い出発点かもしれません。

于 2014-11-27T13:40:09.203 に答える
0

申し訳ありませんが、なぜあなたのソリューションが機能しないのかわかりません..私は自分で試しましたが、-Tag 内に -Tag を使用しました。

では、このようなものはどうでしょうか (素早く汚い!)?

それとも、「1 つの解決策は background-image を使用してから padding-left を使用することです」という意味でしたか。?

ここに画像の説明を入力

<!DOCTYPE html>
<html>
<head>
<style>
input
{
    width: 250px;
    height: 65px;
    padding-left: 85px;
}
img.home
{
    width:85px;
    height:65px;
    background: url('http://img45.imageshack.us/img45/4259/buildingssheet7dv.png') 0 0;
    position: absolute;
    left: 10px;
    top: 10px;
}

</style>
</head>

<body>
<input type="text" class="input"/><img class="home">
</body>
</html>
于 2013-11-14T13:47:49.410 に答える