Grupo de entrada

Accesibilidad

Asegúrese de que todos los controles de formulario tengan un nombre accesible apropiado para que su propósito se pueda transmitir a los usuarios de tecnologías de asistencia. La forma más sencilla de lograrlo es utilizar un <label> elemento o, en el caso de los botones, incluir texto suficientemente descriptivo como parte del <button>...</button> contenido.

Para situaciones en las que no es posible incluir un <label> contenido de texto visible o apropiado, existen formas alternativas de proporcionar un nombre accesible, como:

• <label> elementos ocultos usando la .visually-hidden clase
• Apuntando a un elemento existente que puede actuar como etiqueta usando aria-labelledby
• Proporcionar un title atributo
• Establecer explícitamente el nombre accesible en un elemento usando aria-label

Si ninguno de estos está presente, las tecnologías de asistencia pueden recurrir al uso del placeholder atributo como respaldo para el nombre accesible de los elementos <input>y <textarea> . Los ejemplos de esta sección proporcionan algunos enfoques sugeridos para casos específicos.

Si bien el uso de contenido oculta visualmente ( .sr-only, aria-label e incluso placeholder contenido, que desaparece una vez un campo de formulario tiene contenido) beneficiará a los usuarios de tecnología de asistencia, una falta de texto de la etiqueta visible todavía puede ser problemático para algunos usuarios. Alguna forma de etiqueta visible es generalmente el mejor enfoque, tanto por accesibilidad como por usabilidad.

Tamaño del input select dia

Se debe utilizar la siguiente clase para poder vizualizar el select dia de la fecha en un tamaño de 21%, asi se podra vizualizar en todos los dispositivos.

.input-day {
  flex: 0 0 21%;
  max-width: 21%;
}

Color del input select

Se debe utilizar la siguiente clase para dar un color claro a mostrar en el select, asi se podra vizualizar en todos los dispositivos.

.input-select-text-color {
  color: #2f2f2f!important;
  font-size: .9rem!important;
}

Tamaño del input group

Se debe utilizar la siguiente clase para poder vizualizar el input-group en tamaño de 57%, asi se podra vizualizar en todos los dispositivos.

.input-select-col {
  position: relative!important;
  width: 100%!important;
  padding-left: 0;
  padding-right: 0;
}

validación del input group

Se debe utilizar la siguiente clase para poder vizualizar la validación del input-group, asi se podra vizualizar en todos los dispositivos.

.is-invalid-date {
  background-position: right calc(0.375em + 0.1875rem) center!important;
  background-repeat: no-repeat!important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)!important;
  border-color: #d11149!important;
}