All geek questions in one place

How to set html input box transparent on transparent div?

I have a div set transparent with rgba and want the div to share an input field that also has a transparent background. The problem is that the background of the input field does not display transparently. It works if I use opacity:0.8; in a div, but also transparent text, so I need rgba . For the second input field, which is outside the rgba transparent div, it works.

Here is my sample code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Insert title here</title> <style type="text/css"> .term { background-color: rgba(0,0,0,0.8); color: #5fba3d; width: 200px; height: 100px; } input { background-color: rgba(0,0,0,0.8); color: #FFF; border: none; } </style> </head> <body> <div style="background-color:yellow; width:300px;"> <div class="term"> Input 1 <input type="text" value="Test" /> </div> <br /> <input type="text" value="Input 2" /> </div> </body> </html>

Any ideas?

Thanks!

Nathanael

+6
source share
2 answers

Hey Nathaneal works fine if I change the rgba value, so the text will not be transparent.

 input { background-color: rgba(0,0,0,0.1); color: red; border: none; }

Hope this helps you ... you can see the demo: http://jsbin.com/avupaw/16/edit#html,live

+7
source

Or simply

 input { background: none; color: red; border: none; }
+5
source

Source: https://habr.com/ru/post/919107/

More articles:


All Articles