web-dev-qa-db-ja.com

フォームの入力要素内にアイコンを配置します（背景画像としてではありません！）

ここで尋ねられたことを正確にやりたい：

フォームの入力要素内にアイコンを置く

アイコンを右揃えにすることを除きます。

これらの画像はクリック可能である必要があるため、「背景」の回避策は機能しません。したがって、IMGでなければなりません。

これどうやってするの？

htmlcssformsinputicons
25
John Smith

背景画像のないソリューション：

JSFiddle。

#input_container { 
    position:relative;
    padding:0;
    margin:0;
}
#input { 
    height:20px;
    margin:0;
    padding-left:30px;
}
#input_img {
    position:absolute;
    bottom:8px;
    left:10px;
    width:10px;
    height:10px;
}
<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn1.iconfinder.com/data/icons/CornerStone/PNG/arrow%20right.png" id="input_img">
</div>
46
display-name-is-missing

画像と入力フィールドを含むdivをラッパーとして使用し、絶対位置を使用して入力フィールドのオーバーレイの内側に画像を配置できます。

[〜＃〜] html [〜＃〜]

<div>
    <img src="http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" alt="">
    <input type="text">
</div>

[〜＃〜] css [〜＃〜]

div {
    height:30px;
    width:300px;
    position:relative;
}

img {
    height:15px;
    position:absolute;
    right:0;
    top:5px;
}

input {
    width:100%;
}

[〜＃〜] fiddle [〜＃〜]

http://jsfiddle.net/aTvvN/1/

6
koningdavid

以下を試してください：

enter image description here

HTML：

<input type="text" />
<img src='http://jsfiddle.net/img/initializing.png' />


CSS：

input {
    border:1px solid #ddd;
    border-right:none;
    float: left;
}
input:focus {
    outline:none;
}
img {
    float: left;
    height: 18px;
    width: 19px;
    border: 1px solid #ddd;
    border-left: none;
    margin: 2px 0px 0px -2px;
}

フィドル

1
Parixit