Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, discutiremos Primer CSS Selects Forms. Primer CSS agrega estilos como alineación vertical y altura ligera a la selección para que todos los navegadores compatibles los generen de manera consistente con las entradas de texto.
Primer CSS selecciona clases de formularios:
- form-select: esta clase se utiliza para activar los estilos personalizados. Es una clase padre bajo la cual se definen todas las opciones del formulario.
- select-sm: esta clase se utiliza para definir un menú de selección de tamaño pequeño.
Sintaxis:
<form>
<select class="form-select">
<option>.......</option>
</select>
</form>
Ejemplo 1: El siguiente ejemplo demuestra el uso de Primer CSS Selects Forms.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Selects Forms</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3>Primer CSS Selects Forms</h3> <form> <select class="form-select mt-5"> <option>Choose any Course</option> <option>Data Structure</option> <option>DBMS</option> <option>OOP's</option> </select> </form> </center> </body> </html>
Producción:
Primer CSS Selecciona Formularios
Ejemplo 2: A continuación se muestra otro ejemplo que demuestra el uso de Primer CSS Selects Forms utilizando la clase select-sm .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Selects Forms</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3>Primer CSS Selects Forms</h3> <form> <select class="form-select select-sm mt-5"> <option>Choose any Course</option> <option>Data Structure</option> <option>Operating System</option> <option>OOP's</option> <option>DBMS</option> </select> </form> </center> </body> </html>
Producción:
Primer CSS Selecciona Formularios
Referencia: https://primer.style/css/components/forms#selects
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA