-1

入力フィールドに画像を追加する予定なので、その画像をクリックすると入力フィールドのテキストがクリアになります。

絶対配置を使用する予定です。私の質問は、どの html タグがこの状況に最適な候補であるかということです。

これが私が使用するコードです。

<DOCTYPE html>
    <head>
        <title></title>
        <style>
            #search_form {
                width: 380px;
                height: 110px;
                position: relative;
                background: -webkit-gradient(linear, left top, left bottom, from(#43689a), to(#6399e7));

            }

            #search_form input {
                width: 300px;
                height: 30px;
                border-radius: 18px;
                border: 1px solid #ccc;
                margin-left: 70px;
                margin-top: 40px;
                padding-left: 36px;
            }

            #search_form input:focus {
                outline: none;
            }
            #search_form button {
                position: absolute;
                width: 16px;
                height: 16px;
                background: url(f.png) no-repeat 50% 50%;
                border: 0;
                top: 47px;
                left: 85px;
                cursor: hand;
                text-indent: -9999px;
            }

        </style>
    </head>
    <body>
        <div id="search_form">
            <form>
            <input type="text" placeholder="Search....">
            <button>Submit</button>
        </form>
        </div>
    </body>
</html>
4

2 に答える 2

0

タグを使用する以外に<img>、入力フィールドの背景に画像を配置できます。

 #search_form input { background:url(../imagepath/image.jpg); }
于 2013-03-29T13:34:27.570 に答える
0

<img>

<img>通常、ほとんどの画像作品にはタグを使用したいと思うでしょう。

<img src="blah.png" />

CSSbackground-image

プレーンを使用して、CSS で<div>そのルールを設定することもできます。background-image

HTML

<div class="handsome-bg"></div>

CSS

.handsome-bg {
    background-image:url(blah.png);
}

どれ？

どちらも上向きと下向きがありますが、一般的には に固執し<img>ます。<img>たとえば、画面のサイズや密度に応じて別の画像を選択するのがより困難です (Retina ディスプレイで高解像度の画像を使用したい) 。

于 2013-03-29T13:35:36.980 に答える