The transparency of the elements, but not the border

Question

Well, I have this question, and I see that someone has already asked something like that, but I still do not understand this.

What I want to do is set the opacity to 0.7 for the element, but only for the content and not for the border, I want the border to remain full. Sample code here:

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

As a result, my input element has opacity, but even a border. Can someone tell me how to set opacity only in the content and not in the frame?

Thank x.

Answer 1

Use rgba syntax rgba both color and background and do not use opacity for the 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 did not see that the question was about the input element, but maybe my answer will help someone else, so we go.

Like other posters, you can use rgba syntax to determine the background color.

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

 #element > * { opacity:0.8; } 

Here is an example: JsFiddle

If you need a background image for your element, I think the best way is to put it in a container with a frame.

Answer 3

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

Answer 4

You can use the background:rgba for the desired results, which will only affect the parent not the child , as well as 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