1

He creado un formulario para que los visitantes puedan crear cuentas de usuario. El formulario tiene, además de los correspondientes campos, 2 botones, uno tipo input, que es para que una vez que se rellena el formulario, confirmar la creación de usuario. El otro es tipo button, que es para cancelar y salir sin crear el usuario.

Código HTML:

{% load staticfiles %}
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Registro de Usuario</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'sitio.css' %}">
<script src="{% static 'metodos.js' %}"></script>
</head>
<body>
{% if forma.errors %}
<p>{{ forma.errors }}</p>
{% endif %}
<h1>Introduzca sus datos, por favor</h1>
<form method="post" action="{% url 'Registrarse' %}">
         {% csrf_token %}
         <table>
            <tr>
                <td>{{ forma.username.label_tag }}</td>
                <td>{{ forma.username }}</td>
            </tr>
            <tr>
                <td>{{ forma.password.label_tag }}</td>
                <td>{{ forma.password }}</td>
            </tr>
             <tr>
                <td>{{ forma.email.label_tag }}</td>
                <td>{{ forma.email }}</td>
            </tr>
            <tr>
                <td>{{ forma.first_name.label_tag }}</td>
                <td>{{ forma.first_name }}</td>
            </tr>
             <tr>
                <td>{{ forma.last_name.label_tag }}</td>
                <td>{{ forma.last_name }}</td>
            </tr>
         </table>
         <input type="submit" value="Registro"/>
         <button onclick="viaje('http://127.0.0.1:8000/')">Retroceder</button>
    </form>
</body>
</html>

Quiero que ambos botones tengan color rosa, para lo cual introduje estos códigos CSS:

input{
    text-decoration: underline;
    background-color: #FFB3FF;
    font-weight: bolder;
}
button{
    position: relative;
    left: 30px;
    top: 15 px;
    text-decoration: underline;
    background-color: #FFB3FF;
    font-weight: bolder;
}

Resultado:

introducir la descripción de la imagen aquí

2
  • 2
    En tu css en donde modificas a input quita la linea que dice: background-color: #FFB3FF eso es lo que le da el color rosa el 8 may. 2017 a las 20:13
  • @GermanAlzate Si quito background-color, tambien se lo quito al boton "Registro", que es al que le quiero dar ese color. el 8 may. 2017 a las 20:15

2 respuestas 2

1

Puedes especificar con precisión el elemento al que quieres aplicar un estilo, por elemento, por clase o por identificador.

Por ejemplo:

.negrita {
  font-weight: bold;
}

.azul {
  background-color: blue;
  color: white;
}
 
.rojo {
  background-color: red;
}
  
#especial {
  background-color: indianred;
}
  
<button>Normal</button>
<button class="azul">Azul</button>
<button class="rojo negrita">Rojo</button>
<button class="azul">Otro botón Azul</button>
<button class="rojo">Otro botón Rojo</button>
<button id="especial" class="negrita">Indian Red</button>

En tu caso, deberías usar una clase para esos botones rosas, porque al poner ese estilo en tu hoja de estilos globales, todos los botones serían rosas, siempre.

Observa como los botones de clase azul tienen el mismo estilo, que es diferente del botón estilo rojo o especial.

Observa también que los estilos pueden combinarse.

0

Te recomiendo utilizar un framework css tipo Bootstrap. Creo que te facilitaría bastante las cosas.

Te dejo un fragmento de cómo quedaría el formulario con Bootstrap:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Tienes más información en la página web: http://getbootstrap.com/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.