css - Element opacity but not border

Question

Well, I have this question and I see that someone already asked something similar but this I don't understand yet.

What I want to do is to set a opacity of 0.7 to an element but just to the content and not to the border, I want the border to stay full color. Some example code here:

input#element{
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    opacity: 0.8;
}

The result is that my input element has the opacity but even the border, Can someone tell me how to set the opacity just in the content but not the border?

Thank's.

Answer 1

Use rgba syntax both for color and background and not use opacity for whole element

demo dabblet

input {
    width: 382px;
    height: 26px;
    border: 2px solid #FFF;
    border-radius: 3px;
    background: rgba(255, 255, 255, .8);
    color: rgba(0, 0, 0, .8);
}