Nuestro equipo de especialistas pasados varios días de trabajo y de juntar de información, han obtenido la respuesta, nuestro deseo es que resulte de utilidad para tu proyecto.
Ejemplo 1: aplicar estilo al texto del tipo de entrada
box-sizing: border-box;
input[type=text], select, textarea
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
label
padding: 12px 12px 12px 0;
display: inline-block;
input[type=submit]
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
input[type=submit]:hover
background-color: #45a049;
.container
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
.col-25
float: left;
width: 25%;
margin-top: 6px;
.col-75
float: left;
width: 75%;
margin-top: 6px;
/* Clear floats after the columns */
.row:after
content: "";
display: table;
clear: both;
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px)
.col-25, .col-75, input[type=submit]
width: 100%;
margin-top: 0;
/*
HTML:
DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width, initial-scale=1">head><body><h2>Responsive Formh2><p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.p><divclass="container"><formaction="/action_page.php"><divclass="row"><divclass="col-25"><labelfor="fname">First Namelabel>div><divclass="col-75"><inputtype="text"id="fname"name="firstname"placeholder="Your name..">div>div><divclass="row"><divclass="col-25"><labelfor="lname">Last Namelabel>div><divclass="col-75"><inputtype="text"id="lname"name="lastname"placeholder="Your last name..">div>div><divclass="row"><divclass="col-25"><labelfor="country">Countrylabel>div><divclass="col-75"><selectid="country"name="country"><optionvalue="australia">Australiaoption><optionvalue="canada">Canadaoption><optionvalue="usa">USAoption>select>div>div><divclass="row"><divclass="col-25"><labelfor="subject">Subjectlabel>div><divclass="col-75"><textareaid="subject"name="subject"placeholder="Write something.."style="height:200px">textarea>div>div><divclass="row"><inputtype="submit"value="Submit">div>form>div>body>html>
*/Ejemplo 2: campo de entrada de estilo
#userInfoForm
width: 80%;
padding: 5px 5px;
margin: 0 auto;
background: #FF6700;
border-radius: 25px;
#userInfoForm input
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 25px;
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)