Tengo dos problemas, el primero es que el textarea no cambia de color cuando pulso los botones y no se por que y el segundo es que el textarea como que se sale de el body, y no se como corregirlo sin renunciar a que este de adapte a la anchura de todas las pantallas. (El código para el cambio de color lo he cogido de otro tema del foro)
Código HTML:
<!Doctype html>
<html>
<head>
<title>Nueva nota</title>
<link href="cssplantillaaplnot.css"
rel="stylesheet" type="text/css">
<script type="text/javascript">
function fondocolor(color) {document.bgColor = color;}
</script>
</head>
<body>
<div id="noseparaqueusareesto">
<textarea id="teeextareeea" class=estilotextarea></textarea>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<FORM>
<INPUT TYPE="button" VALUE="Rojo" onClick="fondocolor('RED')">
<INPUT TYPE="button" VALUE="Azul" onClick="fondocolor('BLUE')">
<INPUT TYPE="button" VALUE="naranja" onClick="fondocolor('ORANGE')">
<INPUT TYPE="button" VALUE="Verde" onClick="fondocolor('GREEN')">
<INPUT TYPE="button" VALUE="Negro" onClick="fondocolor('BLACK')">
<INPUT TYPE="button" VALUE="Gris" onClick="fondocolor('GRAY')">
<INPUT TYPE="button" VALUE="amarillo" onClick="fondocolor('YELLOW')">
<INPUT TYPE="button" VALUE="blanco" onClick="fondocolor('WHITE')">
</br>
</br>
<INPUT TYPE="button" VALUE="Rojo" onClick="getElementById('teeextareeea').style.color='red'">
<INPUT TYPE="button" VALUE="Azul" onClick="getElementById('teeextareeea').style.color='blue'">
<INPUT TYPE="button" VALUE="naranja" onClick="getElementById('teeextareeea').style.color='orange'">
<INPUT TYPE="button" VALUE="Verde" onClick="getElementById('teeextareeea').style.color='green'">
<INPUT TYPE="button" VALUE="Negro" onClick="getElementById('teeextareeea').style.color='black'">
<INPUT TYPE="button" VALUE="Gris" onClick="getElementById('teeextareeea').style.color='grey'">
<INPUT TYPE="button" VALUE="amarillo" onClick="getElementById('teeextareeea').style.color='yellow'">
<INPUT TYPE="button" VALUE="blanco" onClick="getElementById('teeextareeea').style.color='white'">
</FORM>
</div>
</body>
</html>
Código CSS:
.estilotextarea {
border:dashed 0px #000000;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding:20px;
font-family: Garamond,verdana; font-size: 18pt;
position: absolute;
width: 100%;
height: 150px;
}
Un saludo y gracias por leer
El color si cambia. Asegurante de que lo estas probando bien.
El segundo problema te pasa porque le pones padding:20px y luego le dices que ocupe el 100% de la pantalla. Así, el textarea ocupara el 100% + 20px de lado. Quita padding o reduce el ancho.
Saludos