Cannot see the text 'Enter your Coupon Code' until you click in and out of box

[bigrich66]

Hi all

J 3.7.2
VM 3.2.2

On the page below

https://www.fairytaleendings.co.uk/cart

There is a Coupon Code box but you cannot see the text 'Enter your Coupon Code' until you click in and out of it. I can see the text is there initially but greyed out/blurred so cannot be read.

I need the text 'Enter your Coupon Code' to be there by default so a user can see where to put the code.

I have successfully managed to style the text that appears when you click in and out of the box using the css below but cannot find how to style the blurred out text before you click in the box so it can be seen

.bd-bootstrapinput-3.form-control.input-sm {
    font-size: 16px;
    color: #e5007e;
}

Cheers

[GJC Web Design]

your template

select::-moz-placeholder,
textarea::-moz-placeholder,
input[type="text"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="datetime"]::-moz-placeholder,
input[type="datetime-local"]::-moz-placeholder,
input[type="date"]::-moz-placeholder,
input[type="month"]::-moz-placeholder,
input[type="time"]::-moz-placeholder,
input[type="week"]::-moz-placeholder,
input[type="number"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="url"]::-moz-placeholder,
input[type="search"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="color"]::-moz-placeholder {
  color: #dddddd;
  opacity: 1;
}
select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="datetime"]:-ms-input-placeholder,
input[type="datetime-local"]:-ms-input-placeholder,
input[type="date"]:-ms-input-placeholder,
input[type="month"]:-ms-input-placeholder,
input[type="time"]:-ms-input-placeholder,
input[type="week"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
input[type="search"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="color"]:-ms-input-placeholder {
  color: #dddddd;
}
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="datetime"]::-webkit-input-placeholder,
input[type="datetime-local"]::-webkit-input-placeholder,
input[type="date"]::-webkit-input-placeholder,
input[type="month"]::-webkit-input-placeholder,
input[type="time"]::-webkit-input-placeholder,
input[type="week"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="color"]::-webkit-input-placeholder {
  color: #dddddd;
}

[K&K media production]

first it's a placeholder and after you've click in and out, it's filled with JS

you need css for your placeholder

http://htmlcolorcodes.com/tutorials/css-placeholder-color/

[bigrich66]

Thank you both that additional CSS from GJC did the trick, looking better now

https://www.fairytaleendings.co.uk/cart