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);
}

Answer 2

I didn't see that the question was about an input element, but maybe my answer will help somebody else, so here we go.

As other posters have said, you can use the rgba syntax to define your background color.

If there are nested elements in the one you want to change, you also can apply the opacity to them with this css:

#element > * {
    opacity:0.8;
}

Here is an example: JsFiddle

If you want a background-image for your element, I think the best way is still to wrap it in a container with the border.