Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Cambiar fondo al hacer click CSS
#1
Hola, quiero que en un formulario de busqueda al hacer click en el para escribir, el fondo cambie de color.

el codigo es este, pero no se como modificarlo para que haga lo que quiero:

Código:
/* search bar */
#searchbar  { margin: 25px 0 0; }
.searchform  { border: 3px solid #327190; background: #686868; width: 250px; padding: 6px 5px; margin: 0; }
.searchform .s  { font-family: 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; border: none; background: #EFEFEF; padding: 0; margin: 0; float: left; width: 234px; }
.searchform .searchsubmit  { background: url(../../images/searchsubmit.gif) no-repeat; text-indent: -9000px; width: 16px; height: 16px; border: none; float: left; cursor: pointer; opacity: 0.7; text-transform: capitalize; padding: 0; margin: 0; }
.searchform .searchsubmit:hover  { background: url(../../images/searchsubmit.gif) no-repeat; opacity: 1; }
WWW
#2
clubmundofm escribió:muy bueno, te se te agredece.

Escriben por escribir.

ON TÓPICO:

Eso lo debes de hacer con jQuery, ahora tengo sueño, pero mañana puedo ver como se le hace
WWW
#3
(20-04-2012, 08:52 AM)shackur escribió: y este codigo seria aplicable para el fondo pero de mi web...?

En verdad no leen? ains

El no está compartiendo como hacerlo, está pidiendo ayuda para hacerlo.

soporteptc, hazme acuerdo para fijarme en la tarde (ahora tengo las 7am) que no debe de ser difícil.
WWW
#4
No estoy seguro... pero creo que con CSS tienes la prodiedad focus, al igual que haces con :hover... pues :focus.

Espero que te sea útil.
#5
Con Js lo puedes hacer de la siguiente manera:

Código:
//Funcion que hace el cambio de fondo
<script type="text/javascript">
function cambiar_fondo(){
document.searchbar.search.style.backgroundColor='#008000';  // Color de fondo #008000
}
</script>


<form name="searchbar"  method=post>
//campo de busqueda
<input type="text" name="" id="search" onfocus="cambiar_fondo()">
</form>

Sonrisa
#6
Facil!, con CSS y la propiedad focus. Mira lo acabo de probar en localhost con este ejemplo:

Archivo: ejemplo.php
Código:
<!DOCTYPE html>
<html>
<head>
<style>
/* search bar */
#searchbar  { margin: 25px 0 0; }
.searchform  { border: 3px solid #327190; background: #686868; width: 250px; padding: 6px 5px; margin: 0; }
.searchform .s  { font-family: 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 14px; border: none; background: #EFEFEF; padding: 0; margin: 0; float: left; width: 234px; }
.searchform .searchsubmit  { background: url(../../images/searchsubmit.gif) no-repeat; text-indent: -9000px; width: 16px; height: 16px; border: none; float: left; cursor: pointer; opacity: 0.7; text-transform: capitalize; padding: 0; margin: 0; }
.searchform .searchsubmit:hover  { background: url(../../images/searchsubmit.gif) no-repeat; opacity: 1; }
.searchform:focus {background:#fff;}
</style>

<body>

<div id="searchform">
    <form action="">
    <label for="buscar">Ejemplo: </label> <input type="text" class="searchform" name="buscar" size="20" placeholder="Buscar...">
    <input type="submit" value="Enviar">
    </form>
</div>
</body>
</html>

Espero haberte ayudado, saludos!.
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Ladrillo [Aporte] pagina con vídeo de fondo gamemaster94 18 389 02-03-2018, 05:43 PM
Último mensaje: ArtuGar
  [Duda] Con respecto de cambiar color a una plantilla con seleccionador Hostingbir 0 320 21-09-2016, 03:04 PM
Último mensaje: Hostingbir
  [Duda] Como hacer una web igual ivanblanco 14 1,037 10-11-2015, 07:30 AM
Último mensaje: mispracticas2009
  InHabilitar Click derecho sin mensaje y con mensaje RezakeaoCrew 2 318 06-05-2015, 12:12 AM
Último mensaje: RezakeaoCrew
  Neuro Web Design y lo que necesitas saber para hacer sitios web más sexys jlgarduza 4 562 11-04-2015, 01:05 AM
Último mensaje: fercol
  [Tutorial] Como hacer que tu página no se almacene en la caché del navegador Kevin9908 10 1,726 28-02-2015, 08:26 PM
Último mensaje: amplox
  [PHP] Hacer un loop simple torgar22 0 553 28-02-2015, 02:47 PM
Último mensaje: torgar22
  Como hacer un Sistema de Noticias con PHP y MySQL torgar22 3 1,480 02-02-2015, 05:16 PM
Último mensaje: AngelKrak
  Mostrar div al hacer click celticslment 8 611 25-01-2015, 04:31 PM
Último mensaje: avdarie
  [Ayuda]Como hacer Funcionar 2 Buscadores JQUERY AngelKrak 2 477 28-12-2014, 06:14 AM
Último mensaje: AngelKrak



Usuarios navegando en este tema: 1 invitado(s)