このようなHTML入力フィールドがあります。右側のテキストボックス内に画像を配置したいと思います。誰かがそのためのCSSを手伝ってくれますか?
<input type="text" id="name"/>
画像には、テキストフィールドの電子メールアドレス内にある画像があります。これはどうやるんですか?
[〜#〜] html [〜#〜]
<div class="fake-input">
<input type="text" />
<img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 />
</div>
[〜#〜] css [〜#〜]
.fake-input { position: relative; width:240px; }
.fake-input input { border:none; background-color:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 2px; right: 5px }
実演デモ
これを試して:
input {
background-image: url("icon.png");
background-position: right top;
background-repeat: no-repeat;
background-size: contain;
}
このようなものを試すことができます
.textBox{
background-image:url(iconimage.jpg);
background-position:right;
background-repeat:no-repeat;
padding-left:17px;
}
次に、このスタイルをテキストボックスに適用します。
<input type="text" class="textBox" />
Background-imageおよびbackground-positionプロパティを使用する
CSS:
input {
height: 70px;
width: 200px;
background-image:url("http://cloud.ohloh.net/attachments/25869/plone-icon-64_med.png");
background-repeat:no-repeat;
background-position: 133px 3px;
}
上記の回答は、質問者の画像に示されている形式を複製したり、説明を提供したりしませんでした。これは、背景画像を使用したソリューションです。
背景画像の構文の説明。
background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;
.bg-email-icon {
background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;
padding-left: 5px;
padding-right: 50px;
width: 255px;
height: 30px;
border: 1px gray solid;
border-radius: 5px 5px 0px 0px;
}
.bg-lock-icon {
background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/lock-icon.png') no-repeat 96.75% 10px white;
padding-left: 5px;
padding-right: 50px;
width: 255px;
height: 30px;
border: 1px gray solid;
border-top-width: 0px;
border-radius: 0px 0px 5px 5px;
}
<input name="exampleEmail" class="bg-email-icon" placeholder="Email" type="email">
<input name="examplePassword" class="bg-lock-icon" placeholder="Password" type="password">
.text3 {
width: 300px;
height: 30px;
}
#text3 {
background-image: url(https://cdn3.iconfinder.com/data/icons/interface-8/128/InterfaceExpendet-09-128.png);
background-size: 30px;
background-repeat: no-repeat;
}
input {
text-align: center;
}
<p class="email">
Email
</p>
<input type="text" placeholder="Email_ID" class="text3" id="text3">
小さな答え:入力フィールドの背景画像として設定することでこれを行うことができます。
試してください:
#name {
background: url('path/image.png') right no-repeat;
}
入力にクラスを追加できます
<input type="text" id="name" class="inputImage" />
そして、CSSのクラスに背景画像
.inputImage
{
background:#FFFFFF url('img.jpg') no-repeat top right;
}
次のようなクラスを追加する必要があります。
CSS:
.bgInput {
background: url(path of your image.jpg) top right no-repeat;
}
HTML:
<input type="text" class="bgInput" id="name"/>