Separately style the placeholder transparency and the border transparency on input text elements in IE10+?

Question

I want to style an input field with the placeholder text having an opacity value of .5 and a border opacity value of 1. In IE10+ these values seem to be tied to each other.

HTML:

<input type="text" placeholder = 'blah blah'/>

CSS:

body {
    background-color:#CCCCFF;
}
:-ms-input-placeholder {
    color: #FFFFFF;
    opacity:.2;
}

input[type="text"] {
     border: 1px solid #FFFFFF;
     background-color: transparent;
     padding:1em;
     opacity:1;
}

http://jsfiddle.net/D6HPN

Is there a way to set them independently using CSS or JS? I know I could use a background div with a solid border, but would prefer not to.

Answer 1

use: rgba(255,255,255,1) instead of #FFFFFF and set 1 to opacity you want.