2

Tengo estos estilos para un input type='date', pero no consigo que los controles para desplegar el calendario queden libres. Puedo ingresar las fechas de manera manual con el teclado numérico pero no quisiera perder la opción del calendario.

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  height: 3.125rem;
  padding: .75rem;
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  /* pointer-events: none; */
  cursor: text; /* Match the input under the label */
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}

/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input:-ms-input-placeholder {
    color: #777;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="form-label-group m-5">
  <input
  id='id1'
    type="Date"
    class="form-control invalid"
    placeholder="Texto"
   
  />

  <label for="id1">
    <span class="d-flex justify-content-between">
      Ingresa defecha
    </span>
  </label>

 
</div>

Actualización

La respuesta de @Jacobo al problema da solución de manera parcial al disminuir el tamaño, pero en el caso de que yo agregue un elemento de texto más a la etiqueta para que se muestre a la derecha este no aparecera hasta el borde (como puede ser un link). Como prevenir esto? He cambiado la reducción de manera vertical y este es el resultado.

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  height: 3.125rem;
  padding: .75rem;
}

.form-label-group > label {
background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 25%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  /* pointer-events: none; */
  cursor: text; /* Match the input under the label */
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}

/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input:-ms-input-placeholder {
    color: #777;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="form-label-group m-5">
  <input
  id='id1'
    type="Date"
    class="form-control invalid"
    placeholder="Texto"
   
  />

  <label for="id1">
    <span class="d-flex justify-content-between">
      Ingresa defecha
      <a href='alert('Se muestra')'>Mostrar alerta</a>
    </span>
  </label>

 
</div>

6
  • ¿A qué te refieres con que queden libres? Tu código funciona bien en el snippet, el elemento muestra correctamente el calendario al hacer click en el mismo. ¿Cuál sería el problema realmente? Commented el 15 abr. 2020 a las 14:00
  • En chrome no logro que se despliegue el calendario, dete picker para escoger la flecha.Que navegador usas?
    – Legna
    Commented el 15 abr. 2020 a las 14:04
  • Tienes razón, he probado en Chrome y no funciona, sin embargo con Firefox y Samsung si que funciona bien. Déjame probar un par de cosas, tiene que ver con las reglas CSS al parecer. Saludos Commented el 15 abr. 2020 a las 14:25
  • La respuesta de @Jacobo es la que da en el clavo, aunque él sugiere que coloques un valor de width:85%, yo verificaría antes la necesidad de darle ese valor, y en todo caso la forma de corregir el mismo de cara al diseño responsive. El tema es que con un width de 100% el elemento se superpone a los controles usados por la UI del input tipo date de Chrome. Commented el 15 abr. 2020 a las 15:23
  • @MauricioContreras revisa los comentarios que le hice y la modificación de mi pregunta por si tienes algún comentario sobre lo que estoy tratando de aplicar para remediar .
    – Legna
    Commented el 15 abr. 2020 a las 18:42

3 respuestas 3

2

Teniendo en cuenta los cambios a la pregunta he borrado lo que tenía. Puedes utilizar la opción auto para height, y el navegador calculará la altura.

height: auto;

Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/height

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  height: 3.125rem;
  padding: .75rem;
}

.form-label-group > label {
background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  /* pointer-events: none; */
  cursor: text; /* Match the input under the label */
  border: 0;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}

/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input:-ms-input-placeholder {
    color: #777;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="form-label-group m-5">
  <input
  id='id1'
    type="Date"
    class="form-control invalid"
    placeholder="Texto"
   
  />

  <label for="id1">
    <span class="d-flex justify-content-between">
      Ingresa defecha
      <a href='alert('Se muestra')'>Mostrar alerta</a>
    </span>
  </label>

 
</div>

2
  • Hola. Dentro de la etiqueta, con ciertas opciones creo un link para que se muestre sobre las opciones (generalmente lo uso para mostrar una contraseña). Con esa linea sin comentar no puedo dar click a ese link. Esa plantilla que publique la uso con los diferentes types
    – Legna
    Commented el 15 abr. 2020 a las 18:15
  • Ah, bien, entonces pongo otra opción que te permita dejar esa regla comentada. Veo que has actualizado la pregunta así que voy responder en función de esa actualización.
    – Chayemor
    Commented el 15 abr. 2020 a las 18:59
2

En tu codigo solo cambia el tamaño de tu label width: 85%; y listo

    display: block;
     width: 85%;
     margin-bottom: 0; /* Override default `<label>` margin */

introducir la descripción de la imagen aquí

cree unos div y les agregue la clase class="p-2" para que me mantenga alineado los div

tambien cambie la clase justify-content-between por justify-content-start

espero te sirva.

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
  padding-top: 0.5em;
}

.form-label-group > input,
.form-label-group > label {
  height: 3.125rem;
  padding: .75rem;
}

.form-label-group > label {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 25%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  /* pointer-events: none; */
  cursor: text; /* Match the input under the label */
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
  
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}

/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input:-ms-input-placeholder {
    color: #777;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="form-label-group m-5">
  <input
  id='id1'
    type="Date"
    class="form-control invalid"
    placeholder="Texto"
   
  />

  <label for="id1" >
    <span class="d-flex justify-content-start mb-3" >
    
    <div class="p-2">Ingresa fecha</div>
    <div  class="p-2"> <a href='alert('Se muestra')'>Mostrar alerta</a> </div>
    </span>
   
  </label>

 
</div>

7
  • Pues ese no es el problema, he probado en Chrome, tal como sugiere el OP y no muestra el panel de calendario. Commented el 15 abr. 2020 a las 14:23
  • Yo estoy usando Chrome y me funciona bien intenta borrar cache o una venta de incógnito.
    – Jacobo
    Commented el 15 abr. 2020 a las 14:25
  • Nop, el resultado es el mismo. No funciona, ni incógnito ni cahe borrada. De hecho yo no uso Chrome, lo instalé únicamente para realizar la prueba. Saludos Commented el 15 abr. 2020 a las 14:37
  • Bueno entonces no se, no puedo hacer más yo, ya que a mi si funciona con mis cambios jajaja te adjunto imagen de resultado de mi navegador, saludos.
    – Jacobo
    Commented el 15 abr. 2020 a las 14:49
  • Pues funciona. Solo que no estoy muy satisfecho con el echo de reducir el tamaño de la etiqueta. En general, en el label después de "Ingresa fecha" ocupo poner un dato más y con justify-content-between lo manda hasta la derecha. Con esta opción queda más hacia el centro. Actualize mi pregunta para ver este efecto. Que no había puesto en la pregunta inicial.
    – Legna
    Commented el 15 abr. 2020 a las 18:25
0

bueno que te parece si hacemos lo que quieres pero con utilidades de bootstrap

mira este ejemplo y lo mejor es que no necesitas personalizar tantos estilos :)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<div class="position-relative m-5">
  <input
  id='id1'
    type="Date"
    class="form-control h-auto pt-3"
  />

  <label for="id1" class="position-absolute" style="
    top: 0;
    padding-left: 0.8rem;
font-size: 12px;
color: #777;
">
      Ingresa defecha
  </label>
  
</div>

quite tus estilos y solo coloque los necesarios en linea, los demas son estilos de bootstrap

3
  • @BetaM ya así sirve?
    – junior
    Commented el 15 abr. 2020 a las 15:06
  • Ok si ya es más clara
    – user128299
    Commented el 15 abr. 2020 a las 15:08
  • Hola. Los estilos son para otras funciones que omiti. Ciertamente es más limpio como lo pones pero en mi caso ocupo esas líneas... aunque no todas O:
    – Legna
    Commented el 15 abr. 2020 a las 18:16

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.