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.

The easiest way would be to give the border to another element that surrounds the input. — BoltClock, Nov 26 '12 at 05:37
@RohitAzad Thank you so much. I don't know how I didn't imagine this. That's exactly what I wanted. — Andrés Orozco, Nov 26 '12 at 05:42

score 27 · Accepted Answer · answered Nov 26 '12 at 05:42

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

score 3 · Answer 2 · answered Nov 26 '12 at 06:04

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.

score 1 · Answer 3 · answered May 21 '14 at 16:42

opacity background but not border css

Demo here

html

<div id="element"></div>

css

#element{
    width: 156px;
    height: 156px;
    border: 2px solid #96d5ea;
    background:rgba(150, 213, 234,1);
    margin: 35px auto;
    -webkit-transform: rotate(-45deg);
    -webkit-transition: all 1s ease;
}

#element:hover {
    background:rgba(150, 213, 234,0);
    -webkit-transform: rotate(315deg);
}

score 0 · Answer 4 · answered Nov 26 '12 at 05:45

0

You can use background:rgba property for your desired results that will only effect your parent not the child and also for the border of parent.

CSS

input#element{
    width: 382px;
    height: 26px;
    border: 2px solid #000;
    border-radius: 3px;
    background:rgba(255,0,0,0.1);
}

DEMO

answered Nov 26 '12 at 05:45

Shailender Arora

7,674
2
31
35

you forgot to apply semi-transparence to the text inside input – Vladimir Starkov Nov 26 '12 at 06:22

Element opacity but not border

4 Answers4

Linked

Related