2

Estoy tratando de aumentar el tamaño de la letra del formulario. He probado varias cosas sin resultado. Lo ultimo que hice fue font-size: 50px; para exagerar un poco, y nada. Dejo lo conseguido. Gracias.

/* estylo de form */
.col-md-7, .col-md-4 {
	background: rgba(255, 255, 255, 0.75);
	/*border: 1px solid red;*/
	padding: 15px;
	margin: 15px 15px 15px 15px;
  }

body
{
	background-color: #F4EAD5;
	background-image: url("http://i66.tinypic.com/vem2k6.jpg");
	background-size: cover;
	font-size: 50px
}

.row {
  text-align: center;
}


/*
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formulario de contacto</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="form.css">
  <script src="form.js"></script>
  <link rel="stylesheet" href="../css/bootstrap.css" >
  <link rel="stylesheet" href="../css/bootstrap-v3.0.0.css" >
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <div class="col-md-12">
            <a class="smalllogo2 logo" href="../index.html"><img src="../images/logo-222.png" alt=""></a>
          <p>Calle Sotillo, 20 </p>
          <p>05417 La Parra, Ávila</p>
          <p>Tlf:  999999999999</p>
          <p> limpia</p>

        </div>
      </div>
      <div class="col-md-7">
        <div class="col-md-12">

          <h2>Contacte</h2>
          <p> Comunique sus dudas, esponga lo que necesita y nos pondremos en contacto con usted en menos de 24 horas. <br>Gracias. </p>
          <form role="form" method="post" id="reused_form">
            <div class="row">
              <div class="col-sm-12 form-group">
                <label for="message"> Mensage:</label>
                <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 form-group">
                <label for="name"> Nombre:</label>
                <input type="text" class="form-control" id="name" name="name" required>
              </div>
              <div class="col-sm-6 form-group">
                <label for="email"> Email:</label>
                <input type="email" class="form-control" id="email" name="email" required>
              </div>
            </div>
            <div class="row" style="margin-bottom:30px;">
              <div class="col-sm-5">
                <img src="captcha.php" id="captcha_image" />
                <br/>
                <a id="captcha_reload" href="#">recargar</a>
              </div>
              <div class="col-sm-6">
                <label for="email">Ingrese el código de la imagen aquí:</label>
                <input type="text" class="form-control" required id="captcha" name="captcha">
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 form-group">
                <button type="submit" class="btn btn-lg btn-default pull-right">Enviar &rarr;</button>
              </div>
            </div>
          </form>
          <div id="success_message" style="width:100%; height:100%; display:none; ">
            <h3>Su mensaje se envio con exito</h3>
          </div>
          <div id="error_message" style="width:100%; height:100%; display:none; ">
            <h3>Error</h3> Lo sentimos, hubo un error al enviar tu formulario. </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

3
  • Te falto el ; al final del font-size Commented el 18 ene. 2018 a las 15:13
  • 2
    He añadido 'font-size: 50px !important; ' y funciona, ahora , partiendo de eso, daré individualmente a cada parte del formulario. Gracias por el apoyo de todos, solo puedo dar por respuesta una, pero todos me ayudasteis con vuestras respuestas, lo cual me valdrá para ocasiones venideras. Commented el 18 ene. 2018 a las 15:37
  • 2
    @ManucoBianco en la última propiedad de una regla CSS no es obligatorio poner el ;
    – user7176
    Commented el 18 ene. 2018 a las 16:17

4 respuestas 4

4

Puede que bootstrap te este complicando un poco cambiar algun atributo, si usas !important deberia funcionarte. Te dejo tu ejemplo modificado.

/* estylo de form */
.col-md-7, .col-md-4 {
	background: rgba(255, 255, 255, 0.75);
	/*border: 1px solid red;*/
	padding: 15px;
	margin: 15px 15px 15px 15px;
  }
 form input{
font-size:50px !important;
}
form textarea{
font-size:50px !important;
}
body
{
	background-color: #F4EAD5;
	background-image: url("http://i66.tinypic.com/vem2k6.jpg");
	background-size: cover;
	font-size: 50px
}

.row {
  text-align: center;
}


/*
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formulario de contacto</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="form.css">
  <script src="form.js"></script>
  <link rel="stylesheet" href="../css/bootstrap.css" >
  <link rel="stylesheet" href="../css/bootstrap-v3.0.0.css" >
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <div class="col-md-12">
            <a class="smalllogo2 logo" href="../index.html"><img src="../images/logo-222.png" alt=""></a>
          <p>Calle Sotillo, 20 </p>
          <p>05417 La Parra, Ávila</p>
          <p>Tlf:  999999999999</p>
          <p> limpia</p>

        </div>
      </div>
      <div class="col-md-7">
        <div class="col-md-12">

          <h2>Contacte</h2>
          <p> Comunique sus dudas, esponga lo que necesita y nos pondremos en contacto con usted en menos de 24 horas. <br>Gracias. </p>
          <form role="form" method="post" id="reused_form">
            <div class="row">
              <div class="col-sm-12 form-group">
                <label for="message"> Mensage:</label>
                <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 form-group">
                <label for="name"> Nombre:</label>
                <input type="text" style="font-size:50px"; class="form-control" id="name" name="name" required>
              </div>
              <div class="col-sm-6 form-group">
                <label for="email"> Email:</label>
                <input type="email" class="form-control" id="email" name="email" required>
              </div>
            </div>
            <div class="row" style="margin-bottom:30px;">
              <div class="col-sm-5">
                <img src="captcha.php" id="captcha_image" />
                <br/>
                <a id="captcha_reload" href="#">recargar</a>
              </div>
              <div class="col-sm-6">
                <label for="email">Ingrese el código de la imagen aquí:</label>
                <input type="text" class="form-control" required id="captcha" name="captcha">
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 form-group">
                <button type="submit" class="btn btn-lg btn-default pull-right">Enviar &rarr;</button>
              </div>
            </div>
          </form>
          <div id="success_message" style="width:100%; height:100%; display:none; ">
            <h3>Su mensaje se envio con exito</h3>
          </div>
          <div id="error_message" style="width:100%; height:100%; display:none; ">
            <h3>Error</h3> Lo sentimos, hubo un error al enviar tu formulario. </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

2

No soy muy amante de usar !important como solución, sobretodo porque después te va a dar más lios, cuando intentes reescribir ese estilo en otro formulario.

Igual todas las respuestas que te dieron son válidas y certeras para tu caso, pero te escribo para sugerirte una mejor alternativa: usa selectores con mayor jerarquía y prioridad para sobrescribir los estilos de bootstrap o la galería que esté usando, en este caso te recomiendo algo como.

/*Para los inputs y textarea*/
#reused_form .form-control {
    font-size: 1em;
}

/*Para los textos de las preguntas*/
#reused_form label {
    font-size: 1em;
}

O incluso un selector más especifico como este:

/*Para los inputs y textarea*/
body #reused_form .form-control {
    font-size: 1em;
}

Y en el caso de que desee sobrescribir ese, puedes cambiar el ID o incrementar los ancestros, así:

/*Para los inputs y textarea*/
html body #reused_form2 .form-control {
    font-size: 1em;
}

Entre más ancestros coloques en el selector mayor prioridad tendrá sobre otros estilos, sobrescribiendolos incluso si están abajo en la cascada. Pero también como te han recomendado, lo mejor es colocar tu custom.css debajo que los estilos de boostrap u otra libreria que este usando.

En tu caso tan especifico y sencillo, si bien !important no hace (o hará) tanto daño, todos los que busquen seguir las buenas prácticas en css (incluso usando js) te van a recomendar seguir mejor este consejo y es algo que se aconseja desde hace más de una década.

Te dejo estos enlaces:

4
  • Gracias de nuevo por tu apoyo @Edgar Gutiérrez , utilice el !important como me aconsejaron, pero viendo el primer enlace que dejaste, revisare y antes de volver a utilizar me lo pensaré. Muy buen articulo, ahora voy entendiendo del por que de vuestra sabiduria. Un saludo y gracias, mañana te cuento mi resultado. Commented el 18 ene. 2018 a las 21:55
  • @MiguelEspeso Hace poco escribí una auto pregunta-respuesta aquí en Stackoverflow en español sobre la especificidad de CSS y porque no se debería usar important. ¿Qué es y para que se utiliza la especificidad de CSS? Un saludo y espero que te sirva ;) Commented el 18 ene. 2018 a las 22:46
  • 1
    Gracias, a sido de gran ayuda @Franciasco Romero. Commented el 18 ene. 2018 a las 22:58
  • @FranciscoRomero Desconocía tu respuesta, muy completa y lo mejor en español. La he incluido en mi listado de referentes, sobre el tema. Un saludo y éxitos para todos! Commented el 19 ene. 2018 a las 0:40
1

Parace ser que te está cogiendo css de algún otro sitio y no te hace caso. Siempre puedes utilizar !important para que eso prevalezca sobre lo demas.

/* estylo de form */
.col-md-7, .col-md-4 {
	background: rgba(255, 255, 255, 0.75);
	/*border: 1px solid red;*/
	padding: 15px;
	margin: 15px 15px 15px 15px;
  }

body
{
	background-color: #F4EAD5;
	background-image: url("http://i66.tinypic.com/vem2k6.jpg");
	background-size: cover;
}

.row {
  text-align: center;
}

form textarea{
  font-size: 50px !important;
}
/*
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formulario de contacto</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="form.css">
  <script src="form.js"></script>
  <link rel="stylesheet" href="../css/bootstrap.css" >
  <link rel="stylesheet" href="../css/bootstrap-v3.0.0.css" >
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <div class="col-md-12">
            <a class="smalllogo2 logo" href="../index.html"><img src="../images/logo-222.png" alt=""></a>
          <p>Calle Sotillo, 20 </p>
          <p>05417 La Parra, Ávila</p>
          <p>Tlf:  999999999999</p>
          <p> limpia</p>

        </div>
      </div>
      <div class="col-md-7">
        <div class="col-md-12">

          <h2>Contacte</h2>
          <p> Comunique sus dudas, esponga lo que necesita y nos pondremos en contacto con usted en menos de 24 horas. <br>Gracias. </p>
          <form role="form" method="post" id="reused_form">
            <div class="row">
              <div class="col-sm-12 form-group">
                <label for="message"> Mensage:</label>
                <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 form-group">
                <label for="name"> Nombre:</label>
                <input type="text" class="form-control" id="name" name="name" required>
              </div>
              <div class="col-sm-6 form-group">
                <label for="email"> Email:</label>
                <input type="email" class="form-control" id="email" name="email" required>
              </div>
            </div>
            <div class="row" style="margin-bottom:30px;">
              <div class="col-sm-5">
                <img src="captcha.php" id="captcha_image" />
                <br/>
                <a id="captcha_reload" href="#">recargar</a>
              </div>
              <div class="col-sm-6">
                <label for="email">Ingrese el código de la imagen aquí:</label>
                <input type="text" class="form-control" required id="captcha" name="captcha">
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 form-group">
                <button type="submit" class="btn btn-lg btn-default pull-right">Enviar &rarr;</button>
              </div>
            </div>
          </form>
          <div id="success_message" style="width:100%; height:100%; display:none; ">
            <h3>Su mensaje se envio con exito</h3>
          </div>
          <div id="error_message" style="width:100%; height:100%; display:none; ">
            <h3>Error</h3> Lo sentimos, hubo un error al enviar tu formulario. </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

-1

seguramente los archivos de bootstrap y demas no dejan sobreescribir el tamaño de la letra al usar !important en su css, intenta agregar !important a tu css y poner tu archivo despues de la carga de bootstrap y demas css con el fin de que lo sobreescriban:

.letra-grande {
  font-size: 50px !important;
 }

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.