Ejemplo 1: cambiar css de entrada de fondo
input[type="text"], textarea {
background-color : #d1d1d1;
}Ejemplo 2: cómo escribir CSS para texto de tipo de entrada
/* For Example, If we want to change css of "text" type
from <input> we do this:*/
input[type=text] {
/* Your Code Here */
}Ejemplo 3: 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:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Responsive Form</h2>
<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>
<div>
<form action="/action_page.php">
<div>
<div>
<label for="fname">First Name</label>
</div>
<div>
<input type="text" name="firstname" placeholder="Your name..">
</div>
</div>
<div>
<div>
<label for="lname">Last Name</label>
</div>
<div>
<input type="text" name="lastname" placeholder="Your last name..">
</div>
</div>
<div>
<div>
<label for="country">Country</label>
</div>
<div>
<select name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div>
<div>
<label for="subject">Subject</label>
</div>
<div>
<textarea name="subject" placeholder="Write something.."></textarea>
</div>
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
*/Ejemplo 4: 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)