html - How to make input placeholder text not opaque when the text field background is opaque -


i have input text field @ { opacity: 0.2; } , has background color of white (#ffffff) on top of black , white image. text field @ correct opacity , looks great. want placeholder text white , not effected opacity of input field. have tried looking how style placeholder text, still seems effected elements opacity. how go doing this?

css reference...

html, body { padding:0; margin: 0; background-color:#222222; }  .notifyemail input[type="text"] { display:block; margin: 0 auto; margin-bottom: 10px; background-color:#ffffff; color: white; padding-right:30px; font-family:inherit; text-transform:uppercase; font-size:14px; height:50px; width:540px; opacity:0.2; } 

thanks much!

try changing second class this. specifies background-color in rgba format , removes opacity attribute:

.notifyemail input[type="text"] {       display:block;       margin: 0 auto 10px 0;       padding-right: 30px;       background-color: rgba(255,255,255,0.2);       font-family:inherit;       text-transform:uppercase;       font-size: 14px;       height: 50px;       width: 540px; } 

then add these classes:

.notifyemail::-webkit-input-placeholder {       color: rgba(255,255,255,1.0);   }  .notifyemail::-moz-placeholder {       color: rgba(255,255,255,1.0);   }  .notifyemail:-ms-input-placeholder {       color: rgba(255,255,255,1.0);   } 

Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

node.js - How to abort query on demand using Neo4j drivers -