![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css-9.png\")
<\/p>\nA apar\u00eancia de um formul\u00e1rio HTML pode ser bastante aprimorada com CSS:<\/p>\n
<\/p>\n
<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<style>\r\ninput[type=text], select {\r\n width: 100%;\r\n padding: 12px 20px;\r\n margin: 8px 0;\r\n display: inline-block;\r\n border: 1px solid #ccc;\r\n border-radius: 4px;\r\n box-sizing: border-box;\r\n}\r\n\r\ninput[type=submit] {\r\n width: 100%;\r\n background-color: #4CAF50;\r\n color: white;\r\n padding: 14px 20px;\r\n margin: 8px 0;\r\n border: none;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n}\r\n\r\ninput[type=submit]:hover {\r\n background-color: #45a049;\r\n}\r\n\r\ndiv {\r\n border-radius: 5px;\r\n background-color: #f2f2f2;\r\n padding: 20px;\r\n}\r\n<\/style>\r\n<body>\r\n\r\n<h3>Using CSS to style an HTML Form<\/h3>\r\n\r\n<div>\r\n <form action=\"\/action_page.php\">\r\n <label for=\"fname\">First Name<\/label>\r\n <input type=\"text\" id=\"fname\" name=\"firstname\" placeholder=\"Your name..\">\r\n\r\n <label for=\"lname\">Last Name<\/label>\r\n <input type=\"text\" id=\"lname\" name=\"lastname\" placeholder=\"Your last name..\">\r\n\r\n <label for=\"country\">Country<\/label>\r\n <select id=\"country\" name=\"country\">\r\n <option value=\"australia\">Australia<\/option>\r\n <option value=\"canada\">Canada<\/option>\r\n <option value=\"usa\">USA<\/option>\r\n <\/select>\r\n \r\n <input type=\"submit\" value=\"Submit\">\r\n <\/form>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\nOutro modelo<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style> \r\ninput {\r\n width: 100%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>A full-width input field:<\/p>\r\n\r\n<form>\r\n <label for=\"fname\">First Name<\/label>\r\n <input type=\"text\" id=\"fname\" name=\"fname\">\r\n<\/form>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n <\/p>\n
O exemplo acima se aplica a todos os elementos <input>. Se voc\u00ea quiser estilizar apenas um tipo de entrada espec\u00edfico, poder\u00e1 usar seletores de atributos:<\/p>\n
input[type=text]<\/code> – selecionar\u00e1 apenas campos de texto
\ninput[type=password]<\/code> – selecionar\u00e1 apenas campos de senha
\ninput[type=number]<\/code> – selecionar\u00e1 apenas campos num\u00e9ricos
\netc ..<\/p>\nEntradas acolchoadas<\/strong>
\nUse a padding<\/code>propriedade para adicionar espa\u00e7o dentro do campo de texto.<\/p>\nDica: Quando voc\u00ea tem muitas entradas uma ap\u00f3s a outra, tamb\u00e9m pode querer adicionar algumas margin, para adicionar mais espa\u00e7o fora delas:<\/span><\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css-8.png\")
<\/p>\n
<\/p>\n
Entradas limitadas<\/strong>
\nUse a border<\/code>propriedade para alterar o tamanho e a cor da borda e use a border-radius<\/code>propriedade para adicionar cantos arredondados:<\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css-7.png\")
<\/p>\n
input[type=text]\u00a0{<\/span>
\nborder:<\/span>\u00a02px solid red;<\/span><\/span>
\nborder-radius:<\/span>\u00a04px;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style> \r\ninput[type=text] {\r\n width: 100%;\r\n padding: 12px 20px;\r\n margin: 8px 0;\r\n box-sizing: border-box;\r\n border: 2px solid red;\r\n border-radius: 4px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Text fields with borders:<\/p>\r\n\r\n<form>\r\n <label for=\"fname\">First Name<\/label>\r\n <input type=\"text\" id=\"fname\" name=\"fname\">\r\n <label for=\"lname\">Last Name<\/label>\r\n <input type=\"text\" id=\"lname\" name=\"lname\">\r\n<\/form>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\nUm modelo de uma linha s\u00f3<\/p>\n
![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css-6.png\")
<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style> \r\ninput[type=text] {\r\n width: 100%;\r\n padding: 12px 20px;\r\n margin: 8px 0;\r\n box-sizing: border-box;\r\n border: none;\r\n border-bottom: 2px solid red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Text fields with only a bottom border:<\/p>\r\n\r\n<form>\r\n <label for=\"fname\">First Name<\/label>\r\n <input type=\"text\" id=\"fname\" name=\"fname\">\r\n <label for=\"lname\">Last Name<\/label>\r\n <input type=\"text\" id=\"lname\" name=\"lname\">\r\n<\/form>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\nEntradas coloridas<\/strong><\/p>\ninput[type=text]\u00a0{<\/span>
\nbackground-color:<\/span>\u00a0#3CBC8D;<\/span><\/span>
\ncolor:<\/span>\u00a0white;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\nUse a background-color<\/code>propriedade para adicionar uma cor de fundo \u00e0 entrada e a color<\/code> propriedade para alterar a cor do texto:<\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css-5.png\")
<\/p>\n
Entradas focadas<\/strong>
\nPor padr\u00e3o, alguns navegadores adicionam um contorno azul ao redor da entrada quando ela \u00e9 focada (clicada). Voc\u00ea pode remover esse comportamento adicionando outline: none;<\/code>\u00e0 entrada.<\/p>\nUse o :focus<\/code>seletor para fazer algo com o campo de entrada quando ele receber o foco:<\/p>\ninput[type=text]:focus\u00a0{<\/span>
\nbackground-color:<\/span>\u00a0lightblue;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css-4.png\")
<\/p>\n
<\/p>\n
input[type=text]:focus\u00a0{<\/span>
\nborder:<\/span>\u00a03px solid #555;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\nou<\/p>\n
<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style> \r\ninput[type=text] {\r\n width: 100%;\r\n padding: 12px 20px;\r\n margin: 8px 0;\r\n box-sizing: border-box;\r\n border: 1px solid #555;\r\n outline: none;\r\n}\r\n\r\ninput[type=text]:focus {\r\n background-color: lightblue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>In this example, we use the :focus selector to add a background color to the text field when it gets focused (clicked on):<\/p>\r\n\r\n<form>\r\n <label for=\"fname\">First Name<\/label>\r\n <input type=\"text\" id=\"fname\" name=\"fname\" value=\"John\">\r\n <label for=\"lname\">Last Name<\/label>\r\n <input type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\">\r\n<\/form>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n <\/p>\n
![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css-3.png\")
<\/p>\n
<\/p>\n
Entrada com \u00edcone \/ imagem<\/strong><\/p>\nSe voc\u00ea deseja um \u00edcone dentro da entrada, use a background-image<\/code>propriedade e posicione-a com a background-position<\/code>propriedade Observe tamb\u00e9m que adicionamos um grande preenchimento esquerdo para reservar o espa\u00e7o do \u00edcone:<\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css-2.png\")
<\/p>\n
input[type=text]\u00a0{<\/span>
\nbackground-color:<\/span>\u00a0white;<\/span><\/span>
\nbackground-image:<\/span>\u00a0url('searchicon.png');<\/span><\/span>
\nbackground-position:<\/span>\u00a010px 10px;<\/span><\/span>
\nbackground-repeat:<\/span>\u00a0no-repeat;<\/span><\/span>
\npadding-left:<\/span>\u00a040px;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style> \r\ninput[type=text] {\r\n width: 100%;\r\n box-sizing: border-box;\r\n border: 2px solid #ccc;\r\n border-radius: 4px;\r\n font-size: 16px;\r\n background-color: white;\r\n background-image: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/favicon.jpg');\r\n background-position: 10px 10px; \r\n background-repeat: no-repeat;\r\n padding: 12px 20px 12px 40px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Input with icon:<\/p>\r\n\r\n<form>\r\n <input type=\"text\" name=\"search\" placeholder=\"Search..\">\r\n<\/form>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\nEntrada de pesquisa animada<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style> \r\ninput[type=text] {\r\n width: 130px;\r\n box-sizing: border-box;\r\n border: 2px solid #ccc;\r\n border-radius: 4px;\r\n font-size: 16px;\r\n background-color: white;\r\n background-image: url('https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/06\/favicon.jpg');\r\n background-position: 10px 10px; \r\n background-repeat: no-repeat;\r\n padding: 12px 20px 12px 40px;\r\n transition: width 0.4s ease-in-out;\r\n}\r\n\r\ninput[type=text]:focus {\r\n width: 100%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Animated search input:<\/p>\r\n\r\n<form>\r\n <input type=\"text\" name=\"search\" placeholder=\"Search..\">\r\n<\/form>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n <\/p>\n
Menus de sele\u00e7\u00e3o de estilo<\/p>\n
![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css-1.png\")
<\/p>\n
<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style> \r\nselect {\r\n width: 100%;\r\n padding: 16px 20px;\r\n border: none;\r\n border-radius: 4px;\r\n background-color: #f1f1f1;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>A styled select menu.<\/p>\r\n\r\n<form>\r\n <select id=\"country\" name=\"country\">\r\n <option value=\"au\">Australia<\/option>\r\n <option value=\"ca\">Canada<\/option>\r\n <option value=\"usa\">USA<\/option>\r\n <\/select>\r\n<\/form>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/formularios-css.png\")
<\/p>\n
input[type=button], input[type=submit], input[type=reset] {\r\n background-color: #4CAF50;\r\n border: none;\r\n color: white;\r\n padding: 16px 32px;\r\n text-decoration: none;\r\n margin: 4px 2px;\r\n cursor: pointer;\r\n}\r\n\r\n\/* Tip: use width: 100% for full-width buttons *\/\r\n\r\n<\/pre>\n <\/p>\n
Teste agora<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style> \r\ninput[type=button], input[type=submit], input[type=reset] {\r\n background-color: #4CAF50;\r\n border: none;\r\n color: white;\r\n padding: 16px 32px;\r\n text-decoration: none;\r\n margin: 4px 2px;\r\n cursor: pointer;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p>Styled input buttons.<\/p>\r\n\r\n<input type=\"button\" value=\"Button\">\r\n<input type=\"reset\" value=\"Reset\">\r\n<input type=\"submit\" value=\"Submit\">\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n <\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n