19

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.

3
  • 1
    The easiest way would be to give the border to another element that surrounds the input.
    – BoltClock
    Nov 26, 2012 at 5:37
  • @RohitAzad Thank you so much. I don't know how I didn't imagine this. That's exactly what I wanted. Nov 26, 2012 at 5:42
  • @RohitAzad your solution not effect on text, check mine Nov 26, 2012 at 6:00

4 Answers 4

27

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

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.

1

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

1
  • you forgot to apply semi-transparence to the text inside input Nov 26, 2012 at 6:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.