Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Placeholder CSS when disabled [closed]

Been searching all over and can't seem to find the answer to this:

I have a checkbox that disables several forms if unchecked. The forms are styled to change color, but the placeholder text remains the same. How can I fix this? (alternatively, I wouldn't mind even just removing all placeholder text)

Thanks!

like image 978
Patrick Mauldin Avatar asked Aug 01 '13 21:08

Patrick Mauldin


People also ask

How do you make a placeholder invisible in CSS?

CSS only provides the styling, it can not remove the actual placeholder. What you can do it, set the placeholder text color as your background color of textbox, so it will look like you don't have placeholder..

How do I make my placeholder disabled?

Answer: Use the disabled and selected Attribute However, you can create similar effect by using the HTML disabled and selected attribute on a <option> element that has empty value. You can also apply the attribute hidden , which hides the placeholder option once selection is made in the dropdown.

Can you set a placeholder in CSS?

CSS ::placeholder SelectorThe ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.

How do you hide the placeholder text of an input field Pick one or more options?

The simplest way of auto-hiding a placeholder text upon focus is using the onfocus and onblur events with the <input> element.


1 Answers

You can style placeholder pseudo-elements in css, so you could write the following css:

input:disabled::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
}
input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
}
input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
}
input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
}

assuming that white is also inputs background.

like image 149
Tadeusz Wójcik Avatar answered Oct 16 '22 06:10

Tadeusz Wójcik