New question

Question:

Date: 12-01-2016 15:35:59 (In Spanish)

Problema con CSS3 HTML5 (Responsive) en formulario en Chrome[Resolved]

Hola a todos

Estoy buscando alguna solución a un problema que no entiendo el porque sucede.

Estoy empezando de a poco con CSS3 y HTML5 para tal practica como ejemplo hice algo básico como un formulario de registro, pudo haber sido cualquier otra cosa, pero en fin.

Trate de hacer que sea Responsive con CSS puro y HTML5.

Problema 1:

El formulario se ve exactamente como esta escrita las reglas CSS en firefox, hasta en el nefasto Internet Exploter.
Pero en Chrome no se cumple, cuando se ingresa los datos en el campo aparece el background en amarillo como se aprecia en la siguiente imagen. Tambien al focus y hover le di reglas para que no sea Amarillo.



Los códigos:

index.html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Formulario de Registro con CSS3 y HTML5</title>

<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="estilos/registro.css">

</head>
<body>
	<form action="resultado.php" method="post">
	<h2>Registro</h2>
    <label for="nombre">Nombre:</label>   
    <input type="text" name="nombre" class="user" placeholder="Nombre" title="Se necesita un nombre" autofocus required=""/>
    <label for="apellido">apellido:</label> 
    <input type="text" name="apellido" class="user"  placeholder="Apellido" title="Se necesita un apellido" required=""/>
    <label for="nickname">Nickname:</label> 
    <input type="text" name="nickname" class="user"  placeholder="Nickname" title="Se necesita un nickname" required=""/>
    <label for="email">Email:</label> 
    <input type="email" name="email" class="email" placeholder="Email" title="Se necesita un email"required=""/> 
    <label for="password">Password:</label> 
    <input type="password" name="pass" class="pass"  placeholder="Password" title="Se necesita un password" required=""/>
	<label for="firma">Firma:</label> 
	<textarea name="firma" class="firm" placeholder="Escriba aqui su firma"></textarea>
	<input type="submit" name="submit" value="Registrarme"id="boton" />
	</form>

</body>
</html>


registro.css

body {
    background-image: url("../img/fondo_min.jpg");
    background-size: 100vw 100vh;
    background-attachment: fixed;
    margin: 0;
    font-family: monospace;
}
form {
    width: 450px;
    margin: auto;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    box-sizing: border-box border-box;
    /* margin-top: 20px; */
    
    border-radius: 10px;
    box-shadow: 3px 4px 5px 0px rgba(93, 162, 183, 0.75);
    /* centrado verticalmente */
    
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
label {
    color: cornflowerblue;
    font-family: monospace;
    font-weight: bold;
    text-shadow: 0px 0px 1px #132C4D;
    color: #0080ff;
    font-size: 14px;
}
h2 {
    color: cornflowerblue;
    text-align: center;
    margin: 0;
    font-size: 30px;
    margin-bottom: 20px;
    text-shadow: 4px 4px 2px rgba(128, 116, 114, 0.5);
    ;
}
input,
textarea {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-size: 17px;
    color: cornflowerblue;
    border: solid 1px;
    border-color: cornflowerblue;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 3px 4px 5px 0px rgba(93, 162, 183, 0.75);
}


input:focus, input:hover textarea:focus,textarea:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: dodgerblue;
    border: solid 2px;
    ;
}
input {
    min-height: 40px;
}
textarea {
    min-height: 100%;
    max-height: 250px;
    max-width: 100%;
}
#boton {
    background: #31384A;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    color: dodgerblue;
    padding: 20px;
}
#boton:hover {
    cursor: pointer;
}
@media (max-width: 480px) {
    form {
        width: 100%;
    }
}
/*  Clases para colocar imagenes como iconos en los campos */

.email {
    background-position: left center;
    padding-left: 20px;
    background-image: url("../img/email.png");
    background-repeat: no-repeat;
}
.email:hover,
.email:focus {
    background-position: left center;
    padding-left: 20px;
    background-image: url("../img/email.png");
    background-repeat: no-repeat;
}
.user {
    background-position: left center;
    background-size: 16px 16px;
    padding-left: 20px;
    background-image: url("../img/user.png");
    background-repeat: no-repeat;
}
.user:hover,
.user:focus {
    background-position: left center;
    background-size: 16px 16px;
    padding-left: 20px;
    background-image: url("../img/user.png");
    background-repeat: no-repeat;
}
.pass {
    background-position: left center;
    background-size: 16px 16px;
    padding-left: 20px;
    background-image: url("../img/key.png");
    background-repeat: no-repeat;
}
.pass:hover,
.pass:focus {
    background-position: left center;
    background-size: 16px 16px;
    padding-left: 20px;
    background-image: url("../img/key.png");
    background-repeat: no-repeat;
}
.firm {
    background-position: left center;
    background-size: 18px 18px;
    padding-left: 22px;
    background-image: url("../img/firm.png");
    background-repeat: no-repeat;
}
.firm:hover,
.firm:focus {
    background-position: left center;
    background-size: 18px 18px;
    padding-left: 22px;
    background-image: url("../img/firm.png");
    background-repeat: no-repeat;
}
/* Fin del estilo de los iconos de los campos del formulario */
/* Estilo a las barras de desplazamientos */
/* Navegador Chrome, firefox y  IE no existe la personalizacion */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-button {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-thumb {
    background: #224e79;
    border: 1px solid #70defe;
    border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
    background: #61bddc;
}
::-webkit-scrollbar-thumb:active {
    background: #1474ad;
}
::-webkit-scrollbar-track {
    background: #36647c;
    border: 1px solid #7aa7cb;
    border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
    background: #2b597b;
}
::-webkit-scrollbar-track:active {
    background: #013747;
}
::-webkit-scrollbar-corner {
    background: transparent;
}


No se a que se debe.

Problema 2: Trato de hacer responsive la tabla de resultado.php quien procesa el formulario.
y no me doy cuenta como hacerlo

resultado.php

<?php
$nombre=$_POST['nombre'];
$apellido=$_POST['apellido'];
$nickname=$_POST['nickname'];
$email=$_POST['email'];
$password="« No se muestra »";
$firma= nl2br($_POST['firma']);

?>

   <!DOCTYPE html>
   <html lang="es">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="estilos/resultado.css">
       <title>Resultado</title>
       
   </head>
   <body>
      <div class="contenedor">
      <h3>Los datos ingresados fueron:</h3>
      
       <table class="tabla"  border="0" width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td class="filas" width="90">Nombre:</td>
		<td class="filas"><?php echo $nombre; ?></td>
	</tr>
	<tr>
		<td class="filas" width="90">Apellido:</td>
		<td class="filas"> <?php echo $apellido; ?></td>
	</tr>
	<tr>
		<td class="filas" width="90">Nickname:</td>
		<td class="filas"><?php echo $nickname; ?></td>
	</tr>
	<tr>
		<td class="filas"  width="90">Email:</td>
		<td class="filas"><?php echo $email; ?></td>
	</tr>
	<tr>
		<td class="filas" width="90">Password:</td>
		<td class="filas"><?php echo $password; ?></td>
	</tr>
	<tr>
		<td class="filas" width="90">Firma:</td>
		<td class="filas"><?php echo $firma; ?></td>
	</tr>
</table>
       
       </div>
       
   </body>
   </html>
 


resultado.css

body {
    background-image: url("../img/fondo_min.jpg");
    background-size: 100vw 100vh;
    background-attachment: fixed;
    margin: 0;
    font-family: arial;
  }

.contenedor {
    width: 500px;
    margin: auto;
    background: rgba(0,0,0,0.4);
    padding: 10px 20px;
    box-sizing: border-box border-box;
   /* margin-top: 20px; */
    border-radius: 10px;
    box-shadow:  3px 4px 5px 0px rgba(93, 162, 183, 0.75);
    

    color: #d6ebff;
    font-size: 14px;
    
    /* centrado verticalmente */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

h3 {
    color: cornflowerblue;
    text-align: center;
    margin: 0;
   
    margin-bottom: 20px;
    text-shadow: 4px 4px 2px rgba(128, 116, 114, 0.5);;
}
.tabla{
    padding: inherit;
}
.filas{
    padding-bottom: 15px;
    font-size: 18px;
}


La demo en funcionamiento online.

Todas las criticas y mejoras que me puedan proporcionar serán bien recibidas.
Se agradece que proporcionen códigos como ejemplos

Muchas gracias por la atención
Que tengan un buen dia

Saludos
Tags: CSS3 - Format - Google Chrome - HTML5 - Question - Responsive - Responsive Web Design Votes: 4 - Answers: 10 - Views: 38 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 12-01-2016 16:41:30 veo un error en registro.css
    form{ box-sizing:border-box }
    esta repitiendo border-box

    lo demas parece estar bien a mi se me ve igual en todos los navegadores

    aca le dejo un ejemplo para que vea el codigo Ejemplo formulario
      Votes: 3 - Link answer
     
  • Date: 12-01-2016 17:12:13 Edwin muchas gracias por la observación, ahi halle el error
    box-sizing: border-box border-box;

    elimine quedando asi
     box-sizing:  border-box;


    Por otro lado, el backround amarillo sucede cuando esta el autocomplete activo

    se soluciona en chrome con estas reglas

    /* Cambiar el color de autocomplete en Chrome  */
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px dodgerblue inset; 
        -webkit-text-fill-color: white  !important;
    }
    
    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 50px dodgerblue inset;
        -webkit-text-fill-color: white !important;
    }
    
    input:-webkit-autofill:hover{
          -webkit-box-shadow: 0 0 0 50px dodgerblue inset;
           -webkit-text-fill-color: white !important;  
    }
    
    


    Cambia el amarillo por celeste que se ajustaría mejor al theme
    Aunque estoy viendo si se puede hacer que sea transparente como el resto de los campos
    algo como background: rgba(0, 0, 0, 0.8);

    El problema es que si elijo algun dato que tenia registrado el autocomplete queda con el color de fonndo celeste y no transparente como estaba originalmente
    si alguien sabe como hacerlo que lo mencione

    Aun falta resolver el punto 2.

    Muchas gracias
      Votes: 3 - Link answer
     
  • Date: 12-01-2016 18:35:12 tambien probe con

    -webkit-box-shadow: 3px 4px 5px 0px rgba(93, 162, 183, 0.75) !important;

    pero tampoco funciona

    y quiero evitar el <form autocomplete="off">
      Votes: 3 - Link answer
     
  • Date: 12-01-2016 20:09:32 Hola,
    Lo del css hay varias soluciones aquí te dejo unas páginas.
    ZIGPRESS (INGLES)
    ENONIC (INGLES) ^_^ ver comentarios.
    Lamento no ayudarte con alguna en español :( pero no encontré más info XD
    En cuanto al punto dos aquí hay dos paginas que te pueden servir.
    CSS-Tricks (INGLES)
    OCTUWEB (ESPAÑOL)

    Saludos de su amigo ElCapa8 ^_^.
      Votes: 2 - Link answer
     
  • Date: 13-01-2016 14:08:44 Edinson muchas gracias por la info
    lo revisare
    +1
    saludos
      Votes: 0 - Link answer
     
  • Date: 15-01-2016 02:48:21 Walter si ya lograste solucionarlo por favor hazme saber cambiando el estado de la pregunta.   Votes: 1 - Link answer
     
  • Date: 15-01-2016 14:02:13 Aun no lo he podido solucionar
    Vere si lo logro en en estos dias si no lo logro lo cambiare a resuelta pero sin resolver ara que no quede pendiente

    saludos
      Votes: 3 - Link answer
     
  • Date: 28-08-2016 10:06:37 Hola Walter:

    Comentabas que tu segundo problema estaba sin resolver:

    Problema 2: Trato de hacer responsive la tabla de resultado.php quien procesa el formulario.
    y no me doy cuenta como hacerlo


    Desde que me iniciaba en programación estudié la programación de tablas para olvidarme de ellas. Opto por trabajar con <div's> y aplicar a fondo los estilos CSS

    Es cierto que HTML5 y CSS3 mantienen la programación (la de los tags de tablas) pero, personalmente, creo que nos complican para la programación hacia bajas resoluciones.

    Plantéate cambiar los <tr><td></td></tr> en divs que puedan ir paralelos en las resoluciones amplias y superpuestos (uno encima del otro) en los anchos reducidos.

    Podría dedicarle un tiempo en la semana que entramos si me pasas los códigos de tu conflicto.

    Saludos
      Votes: 4 - Link answer
     
  • Date: 28-08-2016 14:35:21 Txema Muchas gracias por tomarte el tiempo en leer este post.
    Los codigo que he utilizado están expuesto en la pregunta, al que me he referido últimamente es en resultado.php

    Lo que tengo que aprender es como pasar de los tags de tabla a DIV. Como lo has mencionado oportunamente.

    Una vez más, Txema muchas gracias por tu bondad en contribuir a la comunidad

    Saludos
      Votes: 3 - Link answer
     
  • Date: 29-08-2016 01:34:43 Walter:

    Para comenzar, a ver si te sirve esto (no es nada brillante pero podrás enredar después todo lo que quieras del CSS):
    <!DOCTYPE html>
    <html lang="es-ES">
    
        <head>
            <meta charset="utf-8">
        <style>
    body {
        width: 100%;
        margin: 15px auto;
        text-align: center;
    }
    .row{ 
        display: table-row; 
    	height:80px; 
    	border-style: solid; 
    	border-width: 2px; 
    }
    .col{ 
        display: table-cell; 
    	width: 30%; 
    	text-align: center; 
    	vertical-align: 
    	top; border-style: solid; 
    	border-width: 2px;	
    }
        </style>
    	</head>
    
    	<body>
            <header>
                <h2>Usar divs de CSS para reemplazar tablas</h2>
            </header>
    	    <section id = "container">
    		    <div class = "row">
    			    <div class = "col">
    				    <p>Primera columna</br>Fila uno</br></p>
    				</div> 
    				<div class = "col">
    				    <p>Segunda columna</br> Fila uno</br></p>
    				</div> <div class = "col"> 
    				    <p>Tercera columna</br> Fila uno</br></p> 
    				</div>
    			</div>
    
                <div class = "row">
    			    <div class = "col">
    				    <p>Primera columna</br> Fila dos </br></p>
    				</div>
    				<div class = "col">
    				    <p>Segunda columna</br> Fila dos </br></p>
    				</div>
    			    <div class = "col"> 
    				    <p>Tercera columna</br> Fila dos</br></p>
    				</div>
    			</div>
    		</section>
    	</body>
    </html>

    En http://www.w3schools.com/cssref/pr_class_display.asp tienes un buen número de usos CSS de display:table
      Votes: 3 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In