2012-06-27 15 views
6

Tengo un div conjunto transparente con rgba y quiero en ese div un campo de entrada que también tiene un fondo transparente. El problema es que el fondo del campo de entrada no se vuelve transparente. Funciona si uso opacity:0.8; en el div pero también el texto es transparente, entonces necesito rgba. Para el segundo campo de entrada que está fuera de los trabajos transparentes div rgba.¿Cómo configurar el campo de entrada html transparente en un div transparente?

Aquí mi ejemplo de código:

<!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> 

¿Alguna idea?

Gracias!

Natanael

Respuesta

7

Hey Nathaneal su trabajo muy bien si i chang el valor RGBA manera que el texto no va a transparente

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

espero que esto le ayudará a ... se puede ver la demo: - http://jsbin.com/avupaw/16/edit#html,live

+0

Muchas gracias. Establecer el color de fondo del campo de entrada completamente transparente no vino a mi mente ;-) – Nathanael

5

O simplemente

input { 
    background: none; 
    color: red; 
    border: none; 
}