How to give color to placeholder by accepting color as props in vue js?

Question

I did research a lot about how to give color to placeholder but couldn't find a way to do that. I want to give color to the placeholder where I need to receive color as props in Vue.js to make it reusable component.

I know how to change color using css.But failed to get answer in vuejs.

some links are -

How to update placeholder color using Javascript?

How to change the colour of placeholder using javascript?

you've made the links unclickable - why? `to make it reusable component` - show your component — Bravo, Nov 29 '19 at 08:00
yah, the links are clickable now. @Bravo, I have added my form component — Dcoder14, Nov 29 '19 at 08:04
I found how to do that using js but couldn't implement in vue. const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" }); const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style; placeholderStyle.color = "yellow"; — Dcoder14, Nov 29 '19 at 08:11
what u need then ? do u want me to paste all the codes here or what ? — Dcoder14, Nov 29 '19 at 08:22

score 2 · Accepted Answer · answered Nov 29 '19 at 08:27

2

Here is a way you could do it using CSS variables:

const MyInput = {
  template: `
    <input
      class="my-input"
      placeholder="Placeholder"
      :style="placeholderColor ? {'--placeholder-color': placeholderColor} : {}"
    >
  `,
  
  props: ['placeholder-color']
}

new Vue({
  el: '#app',
  
  components: {
    MyInput
  },
  
  data () {
    return {
      colors: ['#f00', '#0f0', '#00f']
    }
  },
  
  methods: {
    rotate () {
      this.colors.push(this.colors.shift())
    }
  }
})

.my-input {
  --placeholder-color: #f0f;
}

.my-input::placeholder {
  color: var(--placeholder-color);
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <my-input v-for="color in colors" :placeholder-color="color"></my-input>
  <br>
  <button @click="rotate">Rotate</button>
  <br>
  <my-input></my-input>
</div>

The trick is that a CSS variable can be set using style even though a pseudo-element cannot be styled directly.

answered Nov 29 '19 at 08:27

skirtle

27,868
4
42
57

I have so many other styles for that input field then how can I add all styles as I can't bind style again. plz check my form above and accordingly suggest if possoble. Thanks – Dcoder14 Nov 29 '19 at 09:21
@Dcoder You just need to add the extra property to the `styles` object, or `styles` string as the case may be. Assuming it's coming from a computed property it should be trivial to add it within that computed property. e.g. If it's an object then `styles['--placeholder-color'] = this.placeholderColor` somewhere before you return the `styles`. Alternatives include using a spread operator: `:style="{...styles, '--placeholder-color': placeholderColor}"`, but that really shouldn't be necessary. – skirtle Nov 29 '19 at 09:29
styles is a function which I have defined in computed property and but it is not working. below codes are there - styles(){ return{ 'font-size': this.size, 'font-family': this.font, color: this.color, '--placeholder-color': this.pcolor, } – Dcoder14 Nov 29 '19 at 09:33
And also doing like - :style="{...styles, '--placeholder-color': pcolor}" but still not working. – Dcoder14 Nov 29 '19 at 09:38
@Dcoder Your computed property appears to be correct. Break the problem down into stages. If you inspect the relevant element in the developer tools you should be able to see the resulting `style` attribute to confirm that the `--placeholder-color` is being set. If the variable is being set correctly then it suggests the problem is in the CSS that consumes the variable. Make sure you have understood my example. It is not just a matter of setting `--placeholder-color`, you also have to include some suitable CSS targeting the input's `::placeholder` to tell it to use that variable. – skirtle Nov 29 '19 at 09:41
I know how to set variable but my problem was I couldn't able to apply that color to the placeholder. – Dcoder14 Nov 29 '19 at 09:49
@Dcoder I don't know what you're asking anymore. My example uses a [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to work around the limitations of the `style` attribute when it comes to styling pseudo-elements, such as `::placeholder`. I cannot write the relevant CSS selector for you but it just needs to apply the CSS variable to the `::placeholder` pseudo-element of your `input`. My example does this correctly for the component/elements that are used in the example but that selector will need tweaking to match your components/elements. – skirtle Nov 29 '19 at 09:57

How to give color to placeholder by accepting color as props in vue js?

1 Answers1