Foros del Web » Creando para Internet » CSS »

Como personalizar una caja de texto de forma profesional

Estas en el tema de Como personalizar una caja de texto de forma profesional en el foro de CSS en Foros del Web. saludos a todos. estoy intentando modificar una caja de texto para que sea un buscador, para cambiar el color y demás no tengo problemas pero ...
  #1 (permalink)  
Antiguo 04/02/2010, 13:57
 
Fecha de Ingreso: enero-2010
Mensajes: 22
Antigüedad: 7 años, 10 meses
Puntos: 0
Como personalizar una caja de texto de forma profesional

saludos a todos.

estoy intentando modificar una caja de texto para que sea un buscador, para cambiar el color y demás no tengo problemas pero no sé como cambiarle la forma y ponerle dentro una imágen que haga de boton, de hecho esque no sé si hace con CSS o con javascript...

dejo una foto para que veais a qué me refiero:



Algo así es lo que intento hacer, que el cursor no se ponga encima de la lupa cuando pinches en él y que al pulsar enter realice la acción sin tener pulsar ningún boton.

espero impaciente vuestras respuestas.
  #2 (permalink)  
Antiguo 05/02/2010, 06:34
 
Fecha de Ingreso: enero-2010
Mensajes: 22
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Como personalizar una caja de texto de forma profesional

bueno... veo que no ha interesado mucho el tema...

no pasa nada, al final he estado haciendo pruebas y he conseguido dejarlo bastante bien, no tan fino como el de la imágen de arriba pero aceptable.

así ha quedado:



daría las gracias por las respuestas pero... no ha habido ninguna.
  #3 (permalink)  
Antiguo 05/02/2010, 06:40
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Como personalizar una caja de texto de forma profesional

Cita:
Iniciado por elanguido Ver Mensaje
daría las gracias por las respuestas pero... no ha habido ninguna.
¿Nadie te hizo tu trabajo? ¿Porque no te preguntas si planteaste correctamente el hilo, si diste suficiente información?

Aquí se viene llorao de casa.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #4 (permalink)  
Antiguo 05/02/2010, 06:44
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Como personalizar una caja de texto de forma profesional

Cita:
Iniciado por Impostor Ver Mensaje
¿Nadie te hizo tu trabajo? ¿Porque no te preguntas si planteaste correctamente el hilo, si diste suficiente información?

Aquí se viene llorao de casa.

Saludos¡¡
Que respuesta mas desacertada macho, elanguido vino con una duda, normal y corriente como podría tener cualquiera (que para eso esta el foro). Pa decir gilipolleces siempre esta uno a tiempo de "editar".

Y me sumo a la pregunta de cómo personalizar una caja de texto

Saludos
  #5 (permalink)  
Antiguo 05/02/2010, 07:47
 
Fecha de Ingreso: enero-2010
Mensajes: 22
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Como personalizar una caja de texto de forma profesional

dejalo Sintak, a palabras necias oídos sordos.

no sé si será la mejor forma pero yo he hecho lo siguiente:

he quitado el estilo por defecto tanto al boton como a la caja de texto, he puesto la imágen de la lupa como fondo al botón del formulario que solo contiene un espacio en blanco, y he hecho una función para que salga la mano cuando pases el ratón por encima, he metido ambos elementos en div independientes y los he superpuesto ajustandolos hasta que ha quedado de la forma que ves.

si alguien sabe una manera mejor de hacerlo agradecería que me/nos ilustrara, y eso no quiere decir que a los que no digan nada les esté acusando de algo, cosa que creo que tabién ha quedado clara en mi post anterior ;)
  #6 (permalink)  
Antiguo 05/02/2010, 10:37
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Como personalizar una caja de texto de forma profesional

elanguido

se me ocurren dos formas más.

La verdad es que no soy un erudito del css ni mucho menos, me manejo lo básico.

Pero bueno:

1- podemos coger la imagen que queremos, poner una capa de fondo y ajustar el cuadro, para que no se mueva.

2- podemos rodear el campo de texto de capas, con los dibujos que queremos.

No se muy bien como se podría hacer, ya es cosa de investigar el código y que alguien con mas experiencia en el tema nos aconseje.

Saludos
  #7 (permalink)  
Antiguo 07/02/2010, 00:26
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Como personalizar una caja de texto de forma profesional

?¿ no veo tan complicado el crear un buscador como el de la imagen inicial, amigo elanguido si tienes la idea de como se hace, aunque creo que te falto buscarle un poco mas.... yo te propongo un codigo como este ->

en el html
Código HTML:
Ver original
  1. <!-- Form para buscador -->    
  2.     <div class="Buscador">
  3.         <form method="get" action="http://www.google.com/cse" name="Buscador">
  4.             <input type="hidden" name="cx" value="002989906371487604116:t8f5gmsmuzo" />
  5.             <input type="hidden" name="ie" value="UTF-8" />
  6.             <input type="text" name="q" value="Buscar" onclick="Limp();" class="Buscar" />
  7.             <input type="submit" name="sa" value="&nbsp;" class="BtnBuscar" />
  8.             <script type="text/javascript">
  9.             function Limp (){
  10.                 document.Buscador.q.value = '';
  11.                 }              
  12.             </script>
  13.         </form>
  14.     </div>

y en tu css
Código CSS:
Ver original
  1. /* estilos para el buscador */
  2. .Buscador{width: 140px; height: 27px;; float:right; padding:6px;}
  3. input{border:none; font-family: monospace; color:#666; font-size:12px;}
  4. .Buscar{width: 112px; height:17px; padding:2px 10px 2px 22px; background: url(img/CajaBusqueda.jpg) no-repeat; float:right;}
  5. .BtnBuscar{width:22px; height:21px; cursor: pointer; margin:-21px 0 0 -5px; background: transparent; float:left;}

te invito a verlo ya armado -> Buscador Personalizado

solo es el estilo visual ya la funcionalidad depende de vos como quieras integrala si en java, php o ASP

---------------------------------------
cambie un poco el codigo que les habia puesto, para que funcione usando el buscador personalizado de google que es bastante comun hoy dia...
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Última edición por ArturoGallegos; 07/02/2010 a las 01:34 Razón: Añado Funcionalidad Custom Search Google
  #8 (permalink)  
Antiguo 07/02/2010, 16:33
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Como personalizar una caja de texto de forma profesional

Wow¡......

Etiquetas: caja, personalizar, profesional, formulario
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:28.