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.
Primer CSS ofrece formularios que se pueden personalizar usando varias clases como input-contrast y disabled. En este artículo, discutiremos los formularios de personalización de Primer CSS junto con ejemplos.
Clase de formularios de personalización de Primer CSS:
- input-contrast: esta clase se usa para agregar contraste de fondo gris al campo de entrada.
Atributo de formularios de personalización de Primer CSS:
- disabled: este atributo se utiliza para desactivar el campo de entrada.
Sintaxis:
<form>
<input class="form-control input-contrast"
type="text" disabled
/>
</form>
Ejemplo 1: este ejemplo demuestra el uso de formularios de personalización de Primer CSS utilizando la clase de contraste de entrada .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Customization Forms</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3>Primer CSS Customization Forms</h3> <form> <input class="form-control input-contrast" type="number" placeholder="GeeksforGeeks contrast" /> </form> </center> </body> </html>
Producción:
Primeros formularios de personalización de CSS
Ejemplo 2: este ejemplo demuestra el uso de formularios de personalización de Primer CSS con el atributo disabled .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Customization Forms</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Customization Forms</h3> <form> <input class="form-control" type="email" placeholder="Disabled GeeksforGeeks" disabled /> </form> </center> </body> </html>
Producción:
Primeros formularios de personalización de CSS
Referencia: https://primer.style/css/components/forms#customization
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA