Background Image ::placeholder::before-CodePudding

I want to put an icon to the placeholder of an input like:

.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;
    }

Is it possible to do that?

CodePudding user response：

no, you don't. The element inpute don't have content.

CodePudding user response：

If you want to add an icon functioning as a "placeholder" and to disappear when the user starts typing, I suggest you use Javascript, not CSS. Add the Icon and edit its style with Javascript on the Input event listener

CodePudding user response：

On this link you can find out what can you use for styling placeholder.

And this is the solution to your problem:

<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; 
}