Foros del Web » Creando para Internet » CSS »

Cambiar color de fondo de caja de texto

Estas en el tema de Cambiar color de fondo de caja de texto en el foro de CSS en Foros del Web. Buenas me gustaria saber como puedo cambiar el color de fondo de una text field. He estados buscando en google pero no he encontrado lo ...
  #1 (permalink)  
Antiguo 16/02/2005, 03:51
 
Fecha de Ingreso: enero-2005
Mensajes: 11
Antigüedad: 12 años, 11 meses
Puntos: 0
Cambiar color de fondo de caja de texto

Buenas me gustaria saber como puedo cambiar el color de fondo de una text field. He estados buscando en google pero no he encontrado lo que quiero.

Alguien sabe?

Un saludo.
  #2 (permalink)  
Antiguo 16/02/2005, 21:02
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Mensaje Que tal Xperience,

hmm, pues verás...

Si lo que quieres es cambiar el color de fondo de un "bloque", es decir un párrafo normal, entonces mediante css tendrías que hacerlo de la sig. manera:

Bueeeeno , aunque esto funciona con casi todos elementos, como color de fondo de toda la página, color de fondo en tablas, capas, etc, etc...
Código:
.texto {
   background-color: rgb(0,0,0);
   color: #FFFFFF;
  } 
Así como también puedes usar imágenes para colocarlas de fondo, sólo tienes que hacerle unas modificaciónes al código, es tan simple como llamar a la imagen por medio de una URL, simplemente tendrías que cambiar [background-color: rgb(0,0,0);] por (background-image: url('aqui el directorio de la imágen');), y listo! eso es todo

Luego su respectiva clase: <p class="texto">texto con color de fondo negro y letras blancas</p>
Ok, espero te sirva de algo y si tienes dudas al respecto, entonces pregunta...

Slds y buena suerte.
__________________
_______
Jorge Rojas.
  #3 (permalink)  
Antiguo 17/02/2005, 05:23
Avatar de marisoplete  
Fecha de Ingreso: febrero-2005
Ubicación: En algún lugar de un gran país...
Mensajes: 14
Antigüedad: 12 años, 10 meses
Puntos: 0
Te refieres a un "input" o "text area"?

Si lo que te refieres es a cambiar el color de fondo de un campo de formulario, en la css deberás utilizar la misma propiedad "background-color". Pero si además quieres que se vaya el borde (ese tan molesto borde), deberás darle también propiedades a este. Por ejemplo:

.texto{background-color: #ffffff;
border-style: solid;
border-color: #ffffff;
border-width: 1px;
}


No sé si era eso a lo que te referías. Si no, pregunta, ok?
  #4 (permalink)  
Antiguo 17/02/2005, 10:06
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola otra vez,

Yo también tenía la misma duda, pero creo que él solamente se refiere a un párrafo normal. <p>texto</p>

Puedes copiar esto y pegarlo en tu página si quieres,
entre <head> y </head>

Código:
<style type="text/css">
<!--
P {
     font-family: "Bookman Old Style", Verdana, Arial;
     font-size: 11pt;
     color: rgb(139, 69, 19);
     background-color: rgb(250, 250, 210)
     }
-->
</style> 
De esta forma, todos y cada uno de tus párrafos que vayas creando tomarán el aspecto ya antes declarado (automáticamente), es decir que no tienes que hacer nada más que crear tus párrafos sin necesidad de aplicarles clases, id's ni nada de eso.

Ok, espero que esta explicación te quede más clara, y sino pues sigue preguntando.

Slds y buena suerte...
__________________
_______
Jorge Rojas.
  #5 (permalink)  
Antiguo 01/12/2010, 14:42
 
Fecha de Ingreso: noviembre-2008
Mensajes: 1
Antigüedad: 9 años, 1 mes
Puntos: 0
Sonrisa Cambiar color de fondo de caja de texto

<input type="text" style="width:70px;height:30px;font-size:12pt;font-family:Helvetica;font-weight:bold;
color:green;border-width:thin;border-style:solid;border-color:green;background-image:url(images/1.jpg);">


------------------------------------------------

modifica estos estilos:
-width:70px -> es el ancho de tu caja de texto cambia solo el 70 a otro numero
-height:30px -> es el alto de tu caja de texto
-font-size:12pt -> es el tamaño de letra dentro de tu caja de texto
-font family:Helvetica -> es la fuente o tipo de letra
-font-weight:bold -> es negrita o grusor de tu letra
-color:green -> es el color de la letra puedes usar tambien : #FFF000 codigo
-border-width:thin ->
  #6 (permalink)  
Antiguo 07/01/2012, 07:41
 
Fecha de Ingreso: octubre-2010
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Cambiar color de fondo de caja de texto

<body>
<form id="form1" name="form1" method="post" action="">
<table width="345" border="0">
<tr>
<td width="189"><label>Correo electonico

</label></td>
<td width="146"><input type="button" value="Botón de ejemplo" name="boton"
style="BORDER: rgb(128,128,128) 1px solid; FONT-SIZE: 8pt; FONT-FAMILY: Verdana;
COLOR: #f00; BACKGROUND-COLOR: #ff9900"></td>
</tr>
</table>
</form>
</body>

Cita:
Iniciado por Xperience Ver Mensaje
Buenas me gustaria saber como puedo cambiar el color de fondo de una text field. He estados buscando en google pero no he encontrado lo que quiero.

Alguien sabe?

Un saludo.
  #7 (permalink)  
Antiguo 07/01/2012, 07:42
 
Fecha de Ingreso: octubre-2010
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Que tal Xperience,

<body>
<form id="form1" name="form1" method="post" action="">
<table width="345" border="0">
<tr>
<td width="189"><label>Correo electonico

</label></td>
<td width="146"><input type="button" value="Botón de ejemplo" name="boton"
style="BORDER: rgb(128,128,128) 1px solid; FONT-SIZE: 8pt; FONT-FAMILY: Verdana;
COLOR: #f00; BACKGROUND-COLOR: #ff9900"></td>
</tr>
</table>
</form>
</body>

Cita:
Iniciado por iconogt Ver Mensaje
hmm, pues verás...

Si lo que quieres es cambiar el color de fondo de un "bloque", es decir un párrafo normal, entonces mediante css tendrías que hacerlo de la sig. manera:

Bueeeeno , aunque esto funciona con casi todos elementos, como color de fondo de toda la página, color de fondo en tablas, capas, etc, etc...
Código:
.texto {
   background-color: rgb(0,0,0);
   color: #FFFFFF;
  } 
Así como también puedes usar imágenes para colocarlas de fondo, sólo tienes que hacerle unas modificaciónes al código, es tan simple como llamar a la imagen por medio de una URL, simplemente tendrías que cambiar [background-color: rgb(0,0,0);] por (background-image: url('aqui el directorio de la imágen');), y listo! eso es todo

Luego su respectiva clase: <p class="texto">texto con color de fondo negro y letras blancas</p>
Ok, espero te sirva de algo y si tienes dudas al respecto, entonces pregunta...

Slds y buena suerte.
  #8 (permalink)  
Antiguo 07/01/2012, 07:44
 
Fecha de Ingreso: octubre-2010
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Cambiar color de fondo de caja de texto

Cita:
Iniciado por Xperience Ver Mensaje
Buenas me gustaria saber como puedo cambiar el color de fondo de una text field. He estados buscando en google pero no he encontrado lo que quiero.

Alguien sabe?

Un saludo.
<body>
<form id="form1" name="form1" method="post" action="">
<table width="345" border="0">
<tr>
<td width="189"><label>Correo electonico

</label></td>
<td width="146"><input type="button" value="Botón de ejemplo" name="boton"
style="BORDER: rgb(128,128,128) 1px solid; FONT-SIZE: 8pt; FONT-FAMILY: Verdana;
COLOR: #f00; BACKGROUND-COLOR: #ff9900"></td>
</tr>
</table>
</form>
</body>
  #9 (permalink)  
Antiguo 07/01/2012, 08:02
 
Fecha de Ingreso: octubre-2010
Mensajes: 5
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Cambiar color de fondo de caja de texto

Cita:
Iniciado por Xperience Ver Mensaje
Buenas me gustaria saber como puedo cambiar el color de fondo de una text field. He estados buscando en google pero no he encontrado lo que quiero.

Alguien sabe?

Un saludo.

El siguiente es el código completo de un formulario con color de fondo y de texto, se puede copiar y pegar en Dreamweaver u otro editor de html para que sea más fácil editarlo y observarlo.

<form id="chronoform_Contacto" class="Chronoform" action="http://www.productosdeaseo.org/index.php?option=com_chronoforms&amp;chronoform=Co ntacto&amp;event=submit" method="post">
<div class="ccms_form_element cfdiv_text" id="nombre_container_div"><label for="nombre">Nombre</label></div>
<div class="ccms_form_element cfdiv_text"><label for="nombre"></label><input id="nombre" class=" validate['required']" maxlength="150" name="nombre" size="30" type="text"; style="BORDER: #FFF; FONT-SIZE: 8pt; FONT-FAMILY: Verdana;
COLOR: #f00; BACKGROUND-COLOR: #ff9900">
</div>
<div class="ccms_form_element cfdiv_text" id="empresa_container_div"><label for="empresa">Empresa</label></div>
<div class="ccms_form_element cfdiv_text"><input id="empresa" maxlength="150" name="empresa" size="30" type="text"style="BORDER: #FFF; FONT-SIZE: 8pt; FONT-FAMILY: Verdana;
COLOR: #f00; BACKGROUND-COLOR: #ff9900">
</div>
<div class="ccms_form_element cfdiv_text" id="telefono_container_div"><label for="telefono">Teléfono</label></div>
<div class="ccms_form_element cfdiv_text"><label for="telefono"></label><input id="telefono" class=" validate['required','number']" maxlength="150" name="telefono" size="30" type="text"style="BORDER: #FFF; FONT-SIZE: 8pt; FONT-FAMILY: Verdana;
COLOR: #f00; BACKGROUND-COLOR: #ff9900"></div>
<div class="ccms_form_element cfdiv_text" id="correo_container_div"><label for="correo">Correo electrónico</label></div>
<div class="ccms_form_element cfdiv_text"><label for="correo"></label><input id="correo" class=" validate['required','email']" maxlength="150" name="correo" size="30" type="text"style="BORDER: #FFF; FONT-SIZE: 8pt; FONT-FAMILY: Verdana;
COLOR: #f00; BACKGROUND-COLOR: #ff9900"></div>
<div id="servicio_container_div" class="ccms_form_element cfdiv_textarea"><label for="servicio">En que podríamos servirle</label></div>
<div class="ccms_form_element cfdiv_textarea"><label for="servicio"></label><textarea id="servicio" cols="45" rows="12" name="servicio"></textarea></div>
<div id="autoID-3542aeea2d807c206b9642bc25bf27b3_container_div" class="ccms_form_element cfdiv_submit"><input style="color: #F00; background-color: #FF9900" name="input_submit_6" type="submit" value="Enviar" /></div>
<input type="hidden" name="9b7cff1542a17908319c01afaaf0baff" value="1" /></form><!-- don't remove the following 3 lines if you didn't buy a subscription -->
<div class="chronoform"><a href="http://www.chronoengine.com">Powered By ChronoForms - ChronoEngine.com</a></div>
<!-- don't remove the 3 lines above if you didn't buy a subscription -->
  #10 (permalink)  
Antiguo 07/01/2012, 09:46
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Cambiar color de fondo de caja de texto

Dios mio, que poca semantica, que lio de codigo. Duele a los ojos D:

Los estilos se deben separar del HTML, es lo mas recomendable.

Un saludo :)

PD: De donde cogistes ese codigo? No tiene por donde cogerlo.
  #11 (permalink)  
Antiguo 07/01/2012, 10:05
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Cambiar color de fondo de caja de texto

Cita:
Iniciado por callaja2000 Ver Mensaje
El siguiente es el código completo de un formulario con color de fondo y de texto, se puede copiar y pegar en Dreamweaver u otro editor de html para que sea más fácil editarlo y observarlo.


Yo uso Dream, y te puedo asegurar que este código, así como está lejos, muy lejos está de ser "más fácil editarlo".

Debo admitir que no probé editarlo, pero como bien dijo mariomon17: duele a los ojos

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:36.