es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Anular estilo de Bootstrap 5 para el fieldset

30 Jul, 2023 Programación

En versiones anteriores de Bootstrap (y también con CSS básico), el siguiente código HTML:

<fieldset>
  <legend>Test</legend>
    ¡Bienvenido!
</fieldset>

genera un fieldset con un borde, donde la leyenda se coloca encima:

Fieldset con leyenda sobre su borde

Sin embargo, cuando se utiliza el mismo HTML junto a Bootstrap 5, la salida se ve así:

Fieldset en Bootstrap 5

¿Cómo puedo anular el CSS de Bootstrap para que el fieldset vuelva a tener su borde visible con la leyenda encima?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para anular el CSS de Bootstrap para el elemento “fieldset”, puedes agregar tu propio CSS personalizado que se dirija al elemento “fieldset”. Aquí tienes un ejemplo:

    fieldset {
  border: 1px solid gray !important;
  margin: 20px;
}

legend {
  margin-left: 20px;
  padding: 0 5px;
  background-color: white;
}

    En este CSS, estamos agregando un borde al “fieldset” estableciendo su propiedad “border” en “1px solid gray” y agregando un margen para darle espacio. También estamos agregando algunos estilos al “legend” para moverlo a la izquierda y darle un fondo blanco.

    La palabra clave “!important” se utiliza para asegurarse de que este CSS tenga prioridad sobre cualquier CSS definido por Bootstrap.

    Puedes guardar este CSS en un archivo separado y vincularlo a tu HTML mediante una etiqueta “link” en la sección “head” o agregarlo a tu archivo CSS existente.

Comments are closed.