我想將一個圖示放在輸入的占位符上，例如：
.vue-input input {
&::placeholder::before{
content: '';
display: inline-block;
height: .75rem;
width: 1.5rem;
margin-right: .5rem;
background-image: url(~/assets/flag-ch.png);
background-size: 100% 100%;
background-position: center;
}
有可能這樣做嗎？
uj5u.com熱心網友回復：
不，你沒有。該元素inpute沒有內容。
uj5u.com熱心網友回復：
如果您想添加一個用作“占位符”的圖示并在用戶開始輸入時消失，我建議您使用 Javascript，而不是 CSS。在 Input 事件偵聽器上添加圖示并使用 Javascript 編輯其樣式
uj5u.com熱心網友回復：
在此鏈接上，您可以找到可用于樣式占位符的內容。
這是您問題的解決方案：
<input
type="text"
id="myInput"
placeholder="Some Fallback Text" >
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background-image: url("https://w7.pngwing.com/pngs/114/579/png-transparent-pink-cross-stroke-ink-brush-pen-red-ink-brush-ink-leave-the-material-text.png");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19 */
color: transparent;
text-indent: -9999px;
background-image: url("https://w7.pngwing.com/pngs/114/579/png-transparent-pink-cross-stroke-ink-brush-pen-red-ink-brush-ink-leave-the-material-text.png");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("https://w7.pngwing.com/pngs/114/579/png-transparent-pink-cross-stroke-ink-brush-pen-red-ink-brush-ink-leave-the-material-text.png");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("https://w7.pngwing.com/pngs/114/579/png-transparent-pink-cross-stroke-ink-brush-pen-red-ink-brush-ink-leave-the-material-text.png");
background-position: 0 50%;
background-repeat: no-repeat;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398087.html
標籤：css