1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Css formulario

Tema en 'Programación y Diseño Web' iniciado por osman2es, 16 Mar 2004.

  1. osman2es

    osman2es Nuevo usuario

    Hola a todos,
    me gustaria saber si puedo conseguir que un formulario canvio su apariencia al pasar el mouse por encima: tengo un text form con un css aplicado y se que con javascript puedo conseguir que canvie el estilo al pasar el mouse por encima, pero lo que me gustaria saber es si puedo conseguir eso sin javascript,, solo con CSS de igual forma que se consigue con los links
     
    osman2es, 16 Mar 2004
    #1
  2. Anunciante

    Anunciante

     
  3. Randy

    Randy Nuevo usuario

    pasate por <a href="http://www.mundojavascript.com/" target="_blank">http://www.mundojavascript.com/</a>
     
    Randy, 11 Jul 2004
    #2
  4. otherme

    otherme Nuevo usuario

    copialo y salvalo como html a ver si sirve..

    hola.. mira este codigo.. a ver si es lo que quieres..

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>CSS en formulario</title>



    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css">

    <!--

    body,p,form {margin: 0px;padding: 0px;}

    body {

    &nbsp;&nbsp;&nbsp;&nbsp;margin: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;

    &nbsp;&nbsp;&nbsp;&nbsp;background-image: url(img/server.jpg);

    &nbsp;&nbsp;&nbsp;&nbsp;background-repeat: no-repeat;

    &nbsp;&nbsp;&nbsp;&nbsp;background-position: 40px 110px;

    }

    html {

    &nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;

    }



    #formulario {

    &nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;

    &nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #CCCCCC;

    &nbsp;&nbsp;&nbsp;&nbsp;width: 400px;

    &nbsp;&nbsp;&nbsp;&nbsp;height: 330px;

    &nbsp;&nbsp;&nbsp;&nbsp;text-align:right;

    }

    #texto {

    &nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;

    &nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;text-align: justify;

    &nbsp;&nbsp;&nbsp;&nbsp;color: #999999;

    &nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;

    &nbsp;&nbsp;&nbsp;&nbsp;padding-top: 50px;

    &nbsp;&nbsp;&nbsp;&nbsp;padding-right: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom: 5px;

    }

    #campos {

    &nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;

    &nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;color: #999999;

    &nbsp;&nbsp;&nbsp;&nbsp;font-weight: bold;

    &nbsp;&nbsp;&nbsp;&nbsp;line-height: 30px;

    }

    input {

    &nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #999999;

    &nbsp;&nbsp;&nbsp;&nbsp;width: 215px;

    &nbsp;&nbsp;&nbsp;&nbsp;height: 16px;

    &nbsp;&nbsp;&nbsp;&nbsp;line-height: 16px;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-top: 5px;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-left: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-right: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;

    &nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;color: #8F0F1C;

    &nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold;

    &nbsp;&nbsp;&nbsp;&nbsp;padding:0px;

    &nbsp;&nbsp;&nbsp;&nbsp;background: transparent;

    &nbsp;&nbsp;&nbsp;&nbsp;padding-left: 4px;

    &nbsp;&nbsp;&nbsp;&nbsp;}

    #envio {

    &nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #999999;

    &nbsp;&nbsp;&nbsp;&nbsp;width: 125px;

    &nbsp;&nbsp;&nbsp;&nbsp;height: 20px;

    &nbsp;&nbsp;&nbsp;&nbsp;line-height: 16px;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-top: 5px;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-left: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-right: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;

    &nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;color: #000000;

    &nbsp;&nbsp;&nbsp;&nbsp;font-weight:normal;&nbsp;&nbsp;&nbsp;&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-top:10px;

    }



    textarea {

    &nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #999999;

    &nbsp;&nbsp;&nbsp;&nbsp;width: 370px;

    &nbsp;&nbsp;&nbsp;&nbsp;height: 80px;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-top: 5px;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-left: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;margin-right: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;

    &nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;color: #8F0F1C;

    &nbsp;&nbsp;&nbsp;&nbsp;overflow: auto;

    &nbsp;&nbsp;&nbsp;&nbsp;background: transparent;

    &nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold;

    &nbsp;&nbsp;&nbsp;&nbsp;padding:2px;&nbsp;&nbsp;&nbsp;&nbsp;

    }

    #enlace {

    &nbsp;&nbsp;&nbsp;&nbsp;font-family: Verdana, Arial, Helvetica, sans-serif;

    &nbsp;&nbsp;&nbsp;&nbsp;font-size: 10px;

    &nbsp;&nbsp;&nbsp;&nbsp;color: #999999;

    &nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;

    &nbsp;&nbsp;&nbsp;&nbsp;text-align: center;

    &nbsp;&nbsp;&nbsp;&nbsp;padding-left: 10px;

    }



    -->

    </style>

    <script language="JavaScript" type="text/JavaScript">

    <!--

    validado=1;

    function isNumber(inputStr)

    {

    &nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i < inputStr.length; i++)

    &nbsp;&nbsp;&nbsp;&nbsp;{

    &nbsp;var oneChar = inputStr.substring(i, i + 1)

    &nbsp;if ((oneChar < "0" || oneChar > "9") && (oneChar < " " || oneChar > " "))

    &nbsp;{

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;validado=0;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false

    &nbsp;}

    &nbsp;&nbsp;&nbsp;&nbsp;}

    &nbsp;&nbsp;&nbsp;&nbsp;validado=1;&nbsp;&nbsp;&nbsp;&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;return true

    }



    function isMail(inputStr)

    {

    &nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i < inputStr.length; i++)

    &nbsp;&nbsp;&nbsp;&nbsp;{

    &nbsp;var oneChar = inputStr.substring(i, i + 1)

    &nbsp;if (oneChar == "@")

    &nbsp;{

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;validado=1;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true

    &nbsp;}

    &nbsp;&nbsp;&nbsp;&nbsp;}

    //&nbsp;&nbsp;&nbsp;&nbsp;alert("Escriba una dirección de correo electrónico correcta.");

    &nbsp;&nbsp;&nbsp;&nbsp;validado=0;&nbsp;&nbsp;&nbsp;&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;return false

    }



    function validateMail(campo)

    {

    &nbsp;&nbsp;&nbsp;&nbsp;if (validado==1)

    &nbsp;&nbsp;&nbsp;&nbsp;{

    &nbsp;if (!isMail(document.empresa[campo].value))

    &nbsp;{

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("Escriba una dirección de correo electrónico correcta.");

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.empresa[campo].focus(); &nbsp;

    &nbsp;}

    &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;

    }



    function validateNumber(campo)

    {

    &nbsp;&nbsp;&nbsp;&nbsp;if (!isNumber(document.empresa[campo].value))

    &nbsp;&nbsp;&nbsp;&nbsp;{

    &nbsp;alert("Escriba solo carácteres numéricos.");

    &nbsp;document.empresa[campo].focus();

    &nbsp;&nbsp;&nbsp;&nbsp;}

    }



    function isEmpty(inputStr) {

    &nbsp;&nbsp;&nbsp;&nbsp;if (inputStr == "" || inputStr == null)

    &nbsp;&nbsp;&nbsp;&nbsp;{

    // &nbsp;alert("Tiene que rellenar los campos obligatorios para enviar la solicitud.");

    &nbsp;return true

    &nbsp;&nbsp;&nbsp;&nbsp;}



    &nbsp;&nbsp;&nbsp;&nbsp;return false

    }



    function camposobligatorios()

    {

    if(isEmpty(document.empresa['nombre'].value)) { document.empresa.elements['nombre'].focus();alert('Rellene el campo con su Nombre');return false;}

    if(isEmpty(document.empresa['mail'].value)) { document.empresa.elements['mail'].focus();alert('Rellene el campo con su Email');return false;}

    if(!isMail(document.empresa['mail'].value)) { document.empresa.elements['mail'].focus();&nbsp;&nbsp;&nbsp;&nbsp;alert("Escriba una dirección de correo electrónico correcta.");return false;}

    return true;

    }



    function solicitar()

    {

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(camposobligatorios())

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{

    &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.empresa.action="form.php";

    &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.empresa.enviado.value='1';

    &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.empresa.submit();

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

    }



    -->

    </script></head>





    <body>

    <div id="formulario">

    &nbsp;&nbsp;&nbsp;&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;<br>



    &nbsp; &nbsp;<form name="empresa" method="post" action="">

    &nbsp;&nbsp;&nbsp;&nbsp;<input type="hidden" value="0" name="enviado">

    &nbsp; &nbsp; <p id="campos"> Nombre<input type="text" name="nombre" onfocus="this.style.border='1px solid #8F0F1C';this.style.background='#FFFFFF';this.style.color='#8F0F1C';" onblur="this.style.border='1px solid #999999';this.style.background='transparent';this.style.color='#000000';" style="border: 1px solid rgb(153, 153, 153); background: transparent none repeat scroll 0%; -moz-background-clip: initial; -moz-background-inline-policy: initial; -moz-background-origin: initial; color: rgb(0, 0, 0);"></p>

    &nbsp; &nbsp; <p id="campos"> Email<input type="text" name="mail" onfocus="this.style.border='1px solid #8F0F1C';this.style.background='#FFFFFF';this.style.color='#8F0F1C'" onblur="this.style.border='1px solid #999999';this.style.background='transparent';this.style.color='#000000'" style="border: 1px solid rgb(153, 153, 153); background: transparent none repeat scroll 0%; -moz-background-clip: initial; -moz-background-inline-policy: initial; -moz-background-origin: initial; color: rgb(0, 0, 0);"></p>

    <textarea name="consulta" cols="" rows="" onfocus="this.style.border='1px solid #8F0F1C';this.style.background='#FFFFFF';this.style.color='#8F0F1C'" onblur="this.style.border='1px solid #999999';this.style.background='transparent';this.style.color='#000000'" style="border: 1px solid rgb(153, 153, 153); background: transparent none repeat scroll 0%; -moz-background-clip: initial; -moz-background-inline-policy: initial; -moz-background-origin: initial; color: rgb(0, 0, 0);">Quiero solicitar informacion sobre:</textarea><br>

    <input id="envio" name="enviar" type="button" onclick="solicitar()" value="Enviar Consulta" onfocus="this.style.border='1px solid #8F0F1C';this.style.background='#FFFFFF';this.style.color='#8F0F1C'" onblur="this.style.border='1px solid #999999';this.style.background='transparent';this.style.color='#000000'" style="border: 1px solid rgb(153, 153, 153); background: transparent none repeat scroll 0%; -moz-background-clip: initial; -moz-background-inline-policy: initial; -moz-background-origin: initial; color: rgb(0, 0, 0);">

    &nbsp; &nbsp;</form>

    <p style="margin-top: 10px; text-align: center;"><a id="enlace" href="http://www.forocreativo.net/" target="_blank">Para

    &nbsp; &nbsp;mas información entre aquí </a></p>

    </div>

    </body></html>

    <!--c2--></div><!--ec2-->

    copialo y salvalo como html a ver si te sirve..

    suerte...

    Otherme
     
    otherme, 11 Jul 2004
    #3
  5. Randy

    Randy Nuevo usuario

    Ese formulario esta mal, no lo probe, pero le falta el codigo de cierre </html>
     
    Randy, 12 Jul 2004
    #4
  6. otherme

    otherme Nuevo usuario

    css en formulario

    <!--QuoteBegin-Randy+--><div class='quotetop'>CITA(Randy)</div><div class='quotemain'><!--QuoteEBegin-->Ese formulario esta mal, no lo probe, pero le falta el codigo de cierre </html><!--QuoteEnd--></div><!--QuoteEEnd-->

    tienes razon.. cuando le di copy/paste parece que no traje el contenido del body... pero ya lo complete... gracias por la observacion...

    Saludes

    Otherme
     
    otherme, 12 Jul 2004
    #5
  7. Randy

    Randy Nuevo usuario

    Ahora si :p
    Por nada, y a las ordenes!
     
    Randy, 14 Jul 2004
    #6


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·