Veamos un primer ejemplo de lo que podemos hacer con CSS en un formulario.<\/p>\n\n\n\n\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n Utilizamos el atributo width<\/em> <\/strong>para determinar el ancho de la casilla<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Usamos la propiedad padding<\/em> <\/strong>para a\u00f1adir espacio entre el texto y la casilla<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Ten en cuenta que hemos establecido la propiedad box-sizing<\/em><\/strong> en border-box<\/em><\/strong>. Esto asegura que el relleno y eventualmente los bordes est\u00e9n incluidos en el ancho y alto total de los elementos.<\/p>\n\n\n\n Usa la propiedad border<\/em> <\/strong>para cambiar el tama\u00f1o y el color del borde, y use la propiedad border-radius<\/em><\/strong> para agregar esquinas redondeadas:<\/p>\n\n\n\n Si solo deseas un borde inferior, usa la propiedad border-bottom<\/em><\/strong>:<\/p>\n\n\n\n Usa la propiedad background-color<\/em><\/strong> para agregar un color de fondo a la entrada y la propiedad color para cambiar el color del texto:<\/p>\n\n\n\n De forma predeterminada, algunos navegadores agregar\u00e1n un contorno azul alrededor de la entrada cuando se enfoca (hace clic en \u00e9l). Puedes eliminar este comportamiento agregando outline: none;<\/em><\/strong> a la entrada.<\/p>\n\n\n\n Usa el selector :focus<\/em><\/strong> para hacer algo con el campo de entrada cuando se enfoca.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Si deseas un \u00edcono dentro de la entrada, usa la propiedad background-image<\/em><\/strong> y posici\u00f3nalo con la propiedad background-position<\/em><\/strong>. Tambi\u00e9n observa que agregamos un gran relleno a la izquierda para reservar el espacio del icono:<\/p>\n\n\n\n En este ejemplo, usamos la propiedad transition<\/em> <\/strong>para animar el ancho de la entrada de b\u00fasqueda cuando recibe el foco.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Sugerencia: usa la propiedad width<\/em><\/strong> para evitar que se cambie el tama\u00f1o de las \u00e1reas de texto (desactive el \u00abcapturador\u00bb en la esquina inferior derecha).<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Veamos un primer ejemplo de lo que podemos hacer con CSS en un formulario.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":47,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1353","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Veamos un primer ejemplo de lo que podemos hacer con CSS en un formulario.","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1353"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1353\/revisions"}],"predecessor-version":[{"id":1355,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1353\/revisions\/1355"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!DOCTYPE html>
<html>
<style>
input[type=\"text\"],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=\"submit\"] {
width: 100%;
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=\"submit\"]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<\/style>
<body>
<h3>Usando CSS para dar estilo a formularios HTML<\/h3>
<div>
<form action=\"\/action_page.php\">
<label for=\"fname\">Nombre<\/label>
<input
type=\"text\"
id=\"fname\"
name=\"firstname\"
placeholder=\"Tu nombre..\"
\/>
<label for=\"lname\">Apellidos<\/label>
<input
type=\"text\"
id=\"lname\"
name=\"lastname\"
placeholder=\"Tus apellidos..\"
\/>
<label for=\"pais\">Pa\u00eds<\/label>
<select id=\"country\" name=\"country\">
<option value=\"australia\">Australia<\/option>
<option value=\"canada\">Canada<\/option>
<option value=\"usa\">USA<\/option>
<\/select>
<input type=\"submit\" value=\"Submit\" \/>
<\/form>
<\/div>
<\/body>
<\/html><\/pre>\n\n\n\nDando estilo a las casillas<\/h2>\n\n\n\n
input {\n width: 100%;\n}<\/pre>\n\n\n\ninput[type=text] {\n width: 100%;\n padding: 12px 20px;\n margin: 8px 0;\n box-sizing: border-box;\n}<\/pre>\n\n\n\nInputs bordeados<\/h2>\n\n\n\n
input[type=text] {\n border: 2px solid red;\n border-radius: 4px;\n}<\/pre>\n\n\n\ninput[type=text] {\n border: none;\n border-bottom: 2px solid red;\n}<\/pre>\n\n\n\nInputs coloreados<\/h2>\n\n\n\n
input[type=text] {\n background-color: #3CBC8D;\n color: white;\n}<\/pre>\n\n\n\nInputs enfocados<\/h2>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
input[type=\"text\"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=\"text\"]:focus {
border: 3px solid #555;
}
<\/style>
<\/head>
<body>
<h2>Input fields with black border on :focus<\/h2>
<p>
Here, the input field gets a black border color when it gets focus
(clicked on). We have also added the CSS transition property to animate
the border color (takes 0.5 seconds to change the color on focus):
<\/p>
<form>
<label for=\"fname\">First Name<\/label>
<input type=\"text\" id=\"fname\" name=\"fname\" value=\"John\" \/>
<label for=\"lname\">Last Name<\/label>
<input type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\" \/>
<\/form>
<\/body>
<\/html><\/pre>\n\n\n\nInputs con imagen<\/h2>\n\n\n\n
input[type=text] {\n background-color: white;\n background-image: url('searchicon.png');\n background-position: 10px 10px;\n background-repeat: no-repeat;\n padding-left: 40px;\n}<\/pre>\n\n\n\nInput de b\u00fasqueda animado<\/h2>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
input[type=\"text\"] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url(\"searchicon.png\");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
input[type=\"text\"]:focus {
width: 100%;
}
<\/style>
<\/head>
<body>
<h2>Animate width of search input<\/h2>
<form>
<input type=\"text\" name=\"search\" placeholder=\"Search..\" \/>
<\/form>
<\/body>
<\/html><\/pre>\n\n\n\nDando estilo a Textarea<\/h2>\n\n\n\n
textarea {\n width: 100%;\n height: 150px;\n padding: 12px 20px;\n box-sizing: border-box;\n border: 2px solid #ccc;\n border-radius: 4px;\n background-color: #f8f8f8;\n resize: none;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"