Estoy tratando de reducir la altura del campo de entrada (control de formulario). Estoy usando etiquetas flotantes con los controles de formulario. Estoy usando react-bootstrap con react. He intentado reducir el tamaño usando size="sm" y también tengo className="Input-sm" . También agregué className="input-sm" a Form.Control según la respuesta publicada a continuación. Sin embargo, no puedo reducir el tamaño del campo de entrada.
Estoy usando el campo de entrada predeterminado de react-bootstrap. No estoy tratando de reducir el tamaño del texto de la etiqueta flotante. No estoy tratando de reducir el ancho del campo de entrada Form.Control.
A continuación se muestra el código para el campo de entrada (control de formulario)
<FloatingLabel controlId="floatingInput" label="Last name" className="mb-3" type="text" > <Form.Control size="sm" type="text" className="Input-sm" placeholder="Last name" /> </FloatingLabel>Esto no funcionó para mí. ¿Qué debo hacer para reducir el tamaño del campo de entrada?
En el caso de las etiquetas flotantes, el tamaño de la entrada no se rige realmente por el accesorio de size , ni por la adición manual de className='form-control-sm' . Tenga en cuenta que agregar una clase de input-sm no hace nada que yo sepa.
.form-floating>.form-control { padding: 1rem 0.75rem; } .form-floating>.form-control, .form-floating>.form-select { height: calc(3.5rem + 2px); line-height: 1.25; } .form-control-sm { min-height: calc(1.5em + 0.5rem + 2px); /* padding: 0.25rem 0.5rem; Cancelled out by .form-floating */ font-size: .875rem; border-radius: 0.2rem; } Echando un vistazo a lo que sucede con el CSS si agrega .form-control-sm parece que realmente solo afecta el relleno y es anulado por la clase .form-floating . Forzar el relleno a través de !important solo hace que la alineación del texto de entrada vaya a la izquierda, lo que parece un poco raro.
Para hacer que la entrada sea más pequeña, deberá experimentar con la altura y las alturas de línea:
.form-floating>.form-control, .form-floating>.form-select { height: calc(3.5rem + 2px); line-height: 1.25; }