Stilizarea Textarea
Un mic „mâner” din colțul din dreapta jos le permite utilizatorilor să redimensioneze un <textarea> trăgându-l; acesta este comportamentul implicit. Dacă setezi proprietatea resize la none, mânerul dispare.
Exemplu
Prompt
Creați o pagină HTML cu un textarea stilizat. Textarea trebuie să aibă lățime 100%, înălțime 150px, padding 12px 20px, box-sizing border-box, un border 2px solid #ccc, border-radius 4px, fundal #f8f8f8 și resize setat la none.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Textarea</title>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
</style>
</head>
<body>
<h2>Styling Textarea</h2>
<p>Use the resize property to prevent textareas from being resized:</p>
<textarea>Some text...</textarea>
</body>
</html>
Stilizarea unui Meniu Dropdown
Exemplu
Prompt
Creați o pagină HTML cu un meniu dropdown stilizat care conține opțiuni pentru Australia, Canada și USA. Elementul select trebuie să aibă lățime 100%, padding 16px 20px, fără border, border-radius 4px și o culoare de fundal #f1f1f1.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Dropdown Menu</title>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Styling a Dropdown Menu</h2>
<select>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</body>
</html>
Stilizarea Butoanelor de Formular
CSS poate stiliza și butoanele de formular, fie că sunt de tip „button”, „submit” sau „reset”.
Sfat: Tutorialul CSS Buttons intră în mai multe detalii despre stilizarea butoanelor.
Exemplu
Prompt
Creați o pagină HTML cu trei butoane de formular stilizate: Submit (tip submit), Reset (tip reset) și Button (tip button). Stilizați toate trei cu un fundal verde (#04AA6D), fără border, text alb, padding 16px 32px, fără text-decoration, margin 4px 2px și cursor pointer.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Form Buttons</title>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Styling Form Buttons</h2>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Button">
</body>
</html>
CSS Formular Responsive
Un formular devine responsive prin media query-uri CSS. Când ecranul are mai puțin de 600px lățime, etichetele și câmpurile de input nu mai stau unele lângă altele, ci se stivuiesc vertical.
Exemplu
Schimbă dimensiunea ecranului și urmărește cum reacționează aspectul formularului.
Prompt
Creați o pagină HTML cu un formular responsive care are câmpuri pentru prenume, nume și țară cu etichete lângă câmpurile de input. Folosiți o media query astfel încât atunci când ecranul are mai puțin de 600px lățime, etichetele și câmpurile de input se stivuiesc vertical în loc să apară unul lângă altul.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Responsive Form</title>
<style>
* {
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: #04AA6D;
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;
}
.row::after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</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 class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>